How to make 1 div centre align and other float right using CSS [duplicate]

Question

I want to make my div2 to centre align and div3 to be at right.

I tried doing that with text align: center for main div and making float right to div3 but it is making it center align by considering main div's remaining part. I have given display: inline-flex to main div

<div style="height: 40px;width:120px;background-color: yellow;align-items: center;">

<div style="height: 20px;width:20px;background-color: red;">
  Hello
</div>

<div style="height: 20px;float: right;width:20px;background-color: red;">
</div>
</div>

Answer 1

Please try with this code:

<div style="height: 40px;width:120px;background-color: yellow;align-items: center; position:relative;">

<div style="height: 20px;width:40px;background-color: red; overflow:auto; margin:0 auto">
  Hello
</div>

<div style="height: 20px;position:absolute; right:0px; top:0px; width:20px;background-color: red;">
</div>
</div>