Two divs side by side inside another div

Question

I have the following simple html code.

.body-content {
    width: 100%;
    padding-left: 15px;
    padding-right: 15px;
}

.left-menu {
    background-color: red;
    float: left;
    width: 50px;
}

.right-container {
    background-color: blue;
    width: 100%;
}

.middle-view {
    width: 70%;
    float: left;
    background-color: blueviolet;
}

.right-view {
    width: 30%;
    float: left;
    background-color: burlywood;
}

  <div class="body-content">
  <div class="left-menu">
    abc
  </div>
  <div class="right-container">
    <div class="middle-view">
      def
    </div>
    <div class="right-view">
      ghi
    </div>
  </div>
</div>

I am getting the following result:

But I would like to 'def' and 'ghi' side by side.

I don't have much experience using HTML and CSS but I thought middle-view and right-view together will fill right-container (70% + 30%). But as I see the width given to left-menu (50px) has impact on it.

Answer 1

Here is the solution..

.body-content {
    width: 100%;
    padding-left: 15px;
    padding-right: 15px;
  float:left;
}

.left-menu {
    background-color: red;
    float: left;
    width: 50px;
}

.right-container {
    background-color: blue;
    width:calc(100% - 50px);
  float:left;
}

.middle-view {
    width: 70%;
    float: left;
    background-color: blueviolet;
}

.right-view {
    width: 30%;
    float: left;
    background-color: burlywood;
}

<div class="body-content">
  <div class="left-menu">
    abc
  </div>
  <div class="right-container">
    <div class="middle-view">
      def
    </div>
    <div class="right-view">
      ghi
    </div>
  </div>
</div>

Answer 2

.body-content {
  display: flex;              /* forces children to same row */
  padding-left: 15px;
  padding-right: 15px;
}
.left-menu {
  width: 50px;
  background-color: red;
}
.right-container {
  display: flex;              /* forces children to same row */
  flex: 1;                    /* consume remaining space on the row */
  background-color: blue;
}
.middle-view {
  width: 70%;
  background-color: blueviolet;
}
.right-view {
  width: 30%;
  background-color: burlywood;
}

<div class="body-content">
  <div class="left-menu">abc</div>
  <div class="right-container">
    <div class="middle-view">def</div>
    <div class="right-view">ghi</div>
  </div>
</div>