I am designing a form using tailwind and this is one of the element of it.
<label class="bg-gray-500 rounded rounded-r-none p-2">#</label>
<input type="text" class="rounded rounded-l-none focus:outline-none p-2 -ml-2">
and it shows like this, as you can see i have added p-2 to both so ideally i want both height to be same, but obviously that's not the case because input brings some default height. so how do i make both of them same height ?
You can wrap your code inside a flex container. I have removed the margin-left class so that it looks better.
/* For presentation */
body {
padding: 10px;
background: #E2E8F0;
}<link href="https://cdnjs.cloudflare.com/ajax/libs/tailwindcss/1.8.10/tailwind.min.css" rel="stylesheet" />
<div class="flex"> <!-- Wrapped inside flex container -->
<label class="bg-gray-500 rounded rounded-r-none p-2">#</label>
<input type="text" class="rounded rounded-l-none focus:outline-none p-2" placeholder="Same Height">
</div>