CODEWITHSUNDEEP
csstailwind-css
writingdeveloper
writingdeveloper

Reputation: 1076

How to set input and button horizontally with TailwindCSS

I need to set input with button horizontally like this and it works with this code

enter image description here

< label
for = "rootFolder"
class = "flex mb-2 text-sm font-medium text-gray-900 dark:text-gray-300" >
  Processing Directory <
  /label> <
  div class = "mb-6 flex" >
  <
  input type = "rootFolder"
id = "rootFolder"
class = "bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500"
placeholder = ""
required / >
  <
  button class = "text-white bg-blue-700 hover:bg-blue-800 focus:ring-4 focus:outline-none focus:ring-blue-300 font-medium rounded-lg text-sm w-full sm:w-auto px-5 py-2.5 text-center dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-800" >
  add <
  /button> <
  /div>

But I need to change add text to Korean, So I just change it but it makes it like this.

Not only does the text look vertical, but it also changes the size of the Input tag. What is the problem?

enter image description here

Upvotes: 2

Views: 857

Answers (1)

ali memar
ali memar

Reputation: 270

There was a problem with the width you gave to the input. I removed it and used grow instead and also removed the width of the button. See the link below:

https://play.tailwindcss.com/kRknIVE2Ra

Upvotes: 3

Related Questions