CSS left and rghtDiv not aligning to left and right but top and bottom

Question

My css and html look 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

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%;
}