Align two divs one to left and one to immediate right of center-CodePudding

How do I align two divs such that one is to the extreme left and other is to the immediate right of center. Note that its not in center. Its just sticked to center . Something like this

div                 |div

here | represents the center of the page

I tried giving width:50% but on page resize its not giving expected result and all divs are rearranging differently. I tried giving margin-left and right as well but same problem

<div >
    <hr>
    <div style="display:inline-block;">
        <div style="display:inline-block;margin-left:0;width:50%; margin-right:0">
           text1
        </div>
        <div style="display:inline-block;float:right; margin-left:-11px;">
           text2
        </div>
    </div>
</div>

CodePudding user response：

you can use display flex on the container and flex-grow to fill equal spaces

<div style="display:flex;">
  <div style="flex-grow: 1;">
    text1
  </div>
  <div style="flex-grow: 1;">
    text2
  </div>
</div>