Css Multiple Div Position Float Left Right With Flexible Way

1 . Use Css Flex

<div class="container">
  <div>Left div</div>
  <div>Middle div</div>  
  <div>Right div</div>
<!--  then magic trick comes here  -->
<br style="clear: left;" />
</div>

.container {
  display: flex;
}
.container > div {
  flex: 1; /*grow*/
}

Output Like Below Picture

2. Another Way Is

<div class="container">
  <div>Left div</div>
  <div>Middle div</div>  
  <div>Right div</div>
<!--  then magic trick comes here  -->
<br style="clear: left;" />
</div>

.container {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr; /* fraction*/
}

3 Another Advanced Here

Html :
/* Example of Side By Side Divs That Works In Chrome, Firefox */
<div class="stack">
    <div class="row">
        <div class="col">
            One
        </div>
        <div class="col">
            Two
        </div>
    </div>
        <div class="row">
        <div class="col">
            One
        </div>
        <div class="col">
            Two
        </div>
                    <div class="col">
            Three
        </div>
    </div>
</div>

Css : 
.stack .row { 
clear:both;
 
}
.stack .row  .col    {
    float:left;
      border:1px solid;

}

Output Like Below