CODEWITHSUNDEEP
css
learner
learner

Reputation: 65

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

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 class="help-bar-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>

Upvotes: 0

Views: 1030

Answers (1)

Mr. Stash
Mr. Stash

Reputation: 3130

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>

Upvotes: 2

Related Questions