Alignment between input field and button

[dkam]

Hello, new to tailwind but enjoying it.

Any tips on how to get a button and an input field to line up? When I include the m-1 on the first SVG, the #search div seems to move up.

https://jsfiddle.net/dkam/kwmzpedr/15/

Thanks!

[estevanmaito]

Are you trying to make it look like the button is part of the input? If thats the case, you could try something like this:

<div class="relative text-gray-700">
  <input class="w-full h-10 pl-3 pr-32 text-base placeholder-gray-600 border rounded-lg focus:shadow-outline" type="text" placeholder="Regular input"/>
  <button class="absolute inset-y-0 right-0 flex items-center px-4 font-bold text-white bg-indigo-600 rounded-r-lg hover:bg-indigo-500 focus:bg-indigo-700">
    <svg class="w-4 h-4 mr-3 fill-current" viewBox="0 0 20 20"><path d="M3.172 5.172a4 4 0 015.656 0L10 6.343l1.172-1.171a4 4 0 115.656 5.656L10 17.657l-6.828-6.829a4 4 0 010-5.656z" clip-rule="evenodd" fill-rule="evenodd"></path></svg>
    Click
    <svg class="w-4 h-4 ml-3 fill-current" viewBox="0 0 20 20"><path d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z" clip-rule="evenodd" fill-rule="evenodd"></path></svg>
  </button>
</div>

If you're interested in what is making what, I've created some examples with forms: https://tailwind-starter-kit.now.sh/docs/forms

And with buttons: https://tailwind-starter-kit.now.sh/docs/buttons

*you can tweak the code in the editor below each example and see it live 👆

[dkam]

Oh perfect! Thanks very much!