我正在做的引导网格如下:

null

.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>

null

我想要的列的输出，这应该看起来像每行类似的图像。

如何实现对第二行第一列的结合？因此它将显示如图像所示的输出。