Level 104
Wrap the input and div inside another div; and add a border, e.g.
<div class="flex border border-gray-300">
<input type="text">
<div>hello</div>
</div>
A Tailwind input should have no styles by default.
Dec 24, 2021
6
Level 1
How can I glue input next to a div, CSS, tailwind
How can I basically glue these to elements one next to each other like in the next picture? The first one is an input, and the second is a div. I use tailwind https://imgur.com/a/RI0ClKk
like this:
Level 1
@tykus Now I have an extra div: https://imgur.com/a/VlsRXsb
Level 104
@TikTina if you make the input grow, then inner divs will fill the outer one.
<div class="flex border border-gray-300">
<input type="text" class="flex-grow">
<div>hello</div>
</div>
Just grow if you're using tailwindcss v3
Level 1
@tykus Oh, I understand it, but the thing is I need to specify my width for my input because if I leave it widthless it will be too wide.
Level 104
@TikTina set a width on the parent; or make the parent inline-flex
<div class="border border-gray-300 inline-flex">
<input type="text" class="w-64">
<div>hello</div>
</div>
1 like
Level 1
@tykus Thank you! It worked!
Please or to participate in this conversation.