CSS left 和 rghtDiv 不对齐左右但上下对齐

Question

My css and html looks like below. mRow is the main div and within that is my mRowLeft and mRowRight. However instead of left and right I see them appear top left and bottom right.

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

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

Answer 2

You should be putting your label and content under the same left/right div.

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

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

Then you can either use inline-blocks:

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

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

or use flexbox:

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

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