divを互いに整列させる

Question

基本的には、.answer divをお互いの下に並べる必要があります。

テキストは次のようになりました：

ファーストネーム：             オリバー
姓：                 マラン
性別：               男性

そして、私はそれはこのようになりたい：

ファーストネーム：       オリバー
姓：         マラン
性別：                 男性

CODE：

.profile-data { 
 
    padding-left: 170px; 
 
    padding-top: 50px; 
 
} 
 
h3.header-h3 { 
 
    font-size: 26px; 
 
} 
 
.data { 
 
    font-size: 20px; 
 
    margin-bottom: 15px; 
 
    border-bottom: 1px solid #666; 
 
    padding: 7px; 
 
    width: 60%; 
 
} 
 
.answer { 
 
    margin-left: 100px; 
 
    position: relative; 
 
    display: inline-block; 
 
}

<div class="profil-data"> 
 

 
    <h3 class="header-h3">Personal Info</h3> 
 

 
    <div class="data"> 
 
    Name: 
 
    <div class="answer"><b>Oliver</b> 
 
    </div> 
 
    </div> 
 

 
    <div class="data"> 
 
    Lastname: 
 
    <div class="answer"><b>Malan</b> 
 
    </div> 
 
    </div> 
 

 
    <div class="data"> 
 
    Gender: 
 
    <div class="answer"><b>Male</b> 
 
    </div> 
 
    </div> 
 

 
</div>

Answer 1

などlabelとして、要素内のテキストを折り返すとwidth

label { 
 
    width: 150px; 
 
    display: inline-block 
 
} 
 
.profile-data { 
 
    padding-left: 170px; 
 
    padding-top: 50px; 
 
} 
 
h3.header-h3 { 
 
    font-size: 26px; 
 
} 
 
.data { 
 
    font-size: 20px; 
 
    margin-bottom: 15px; 
 
    border-bottom: 1px solid #666; 
 
    padding: 7px; 
 
    width: 60%; 
 
} 
 
.answer { 
 
    position: relative; 
 
    display: inline-block; 
 
}

<div class="profil-data"> 
 

 
    <h3 class="header-h3">Personal Info</h3> 
 

 
    <div class="data"> 
 
    <label>Name:</label> 
 
    <div class="answer"><b>Oliver</b> 
 
    </div> 
 
    </div> 
 

 
    <div class="data"> 
 
    <label>Lastname:</label> 
 
    <div class="answer"><b>Malan</b> 
 
    </div> 
 
    </div> 
 

 
    <div class="data"> 
 
    <label>Gender:</label> 
 
    <div class="answer"><b>Male</b> 
 
    </div> 
 
    </div> 
 

 
</div>

を与えます