Bootstrap 4 grid column merging - html

Question

I am working on bootstrap grid which is as follows:
.facevalue {
background: #ffffff61;
font-family: Dubai;
font-size: 18px;
font-weight: 400;
line-height: 30px;
padding: 0 30px;
border: 1px solid #e9e9e9;
margin: 1px 0;
}
.faceid {
background: #dcdcdc;
font-family: Dubai;
font-size: 18px;
font-weight: 500;
line-height: 30px;
padding: 0 30px;
border: 1px solid #e9e9e9;
margin: 1px 0;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" />
<div class="row no-gutters">
<div class="col-md-6">
<div class="row no-gutters">
<div class="col-md-3">
<div class="faceid">Name</div>
</div>
<div class="col-md-9">
<div class="facevalue">ABC</div>
</div>
</div>
</div>
<div class="col-md-6">
<div class="row no-gutters">
<div class="col-md-3">
<div class="faceid">DOB</div>
</div>
<div class="col-md-9">
<div class="facevalue">11/12/2020</div>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-md-12">
<div class="row no-gutters">
<div class="col-md-3">
<div class="faceid">About Me</div>
</div>
<div class="col-md-9"><textarea class="facevalue w-100 p-1" type="text" id="myComment" rows="1" cols="50" value="">About me text....... </textarea>
</div>
</div>
</div>
</div>
I want the output for columns which should look like similar to each rows as per image.
How to achieve to combining the first column of second row? So it will show output as shown in image.

Answer 1

.facevalue {
background: #ffffff61;
font-family: Dubai;
font-size: 18px;
font-weight: 400;
line-height: 30px;
padding: 0 30px;
border: 1px solid #e9e9e9;
margin: 1px 0;
}
.faceid {
background: #dcdcdc;
font-family: Dubai;
font-size: 18px;
font-weight: 500;
line-height: 30px;
padding: 0 30px;
border: 1px solid #e9e9e9;
margin: 1px 0;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" />
<div class="row no-gutters">
<div class="col-sm-3">
<div class="faceid">Name</div>
</div>
<div class="col-sm-3">
<div class="facevalue">ABC</div>
</div>
<div class="col-sm-3">
<div class="faceid">DOB</div>
</div>
<div class="col-sm-3">
<div class="facevalue">11/12/2020</div>
</div>
</div>
<div class="row no-gutters">
<div class="col-sm-3">
<div class="faceid">About Me</div>
</div>
<div class="col-sm-9"><textarea class="facevalue w-100 p-1" type="text" id="myComment" rows="1" cols="50" value="">About me text....... </textarea>
</div>
</div>