I have a flexbox which consists of one input box and two circular divs. I want the input field to take up all the space that the circle divs don't need, hence I assigned it a w-full.
However, the input field takes up more space than it should and in effect causes the divs to be squished and not correct circles.
Image:
Code:
<div class="flex w-full p-3 gap-x-2 items-center bg-red-100">
<input class="w-full h-10 p-2 bg-orange-50 outline-none"></input>
<div class="w-9 h-9 rounded-full bg-blue-100"> </div>
<div class="w-9 h-9 rounded-full bg-green-100"></div>
</div>