CSS left и rghtDiv не выравнивание по левому и правому краям, но сверху и снизу

Question

Мои css и html выглядят как показано ниже. mRow - это основной div, а внутри него - мои mRowLeft и mRowRight. Однако вместо левой и правой я вижу, что они появляются сверху слева и справа внизу.

div.mRow {
  padding: 2px 25px 2px 0;
    margin-top: 4px;
    margin-bottom: 3px;
  float: left;
  text-align:left;
  width: 350px;
  /*border:1px solid green;*/ 
}


.mRowLeft {
  padding: 2px 25px 2px 0;
    margin-top: 4px;
    margin-bottom: 3px;
  float: left;
  text-align:left;
  width: 48%;
  /*border:1px solid green;*/ 
}

.mRowRight {
  padding: 2px 25px 2px 0;
    margin-top: 4px;
    margin-bottom: 3px;
  float: right;
  text-align:left;
  width: 48%;
  /*border:1px solid green;*/ 
}
///....
<div class="mRow">
<div class="mRowLeft"></div> --label
<div class="mRowLeft"></div> --10rows
<div class="mRowRight"></div> --label
<div class="mRowRight"></div> --10rows
</div>
...//

Answer 1

Вы должны поместить свой ярлык и содержимое в один и тот же левый / правый раздел.

<div class="mRow">
  <div class="mRowLeft">
    <div>--label</div>
    <div>10rows</div>
  </div> 

  <div class="mRowRight">   
    <div>label</div>
    <div>10rows</div> 
  </div>
</div>

Тогда вы можете использовать встроенные блоки:

.mRow {
  white-space: nowrap;
  width: 350px;
}

.mRowLeft,
.mRowRight {
  display: inline-block;
  white-space: normal;
  width: 50%;
}

или использовать flexbox:

.mRow {
  display: flex;
  flex-direction: row;
  width: 350px;
}

.mRowLeft,
.mRowRight {
  width: 50%;
}

Answer 2

.mRow
{
  display:flex;
  justify-content:space-around;
}

<div class="mRow">
<div class="mRowLeft">
  dfsf
  <div class="mRowLeft">sdfvs</div> 
</div>

<div class="mRowRight">
  sdfs
  <div class="mRowRight">sdfsd</div>
</div> 

</div>