javascript - InputText and Submit in one row

Question

How to pass my submit button in one row with inputtext, that submit will be on the right side of the inputtext?

my code:

<div class="mt-12">
             <input
              id="grid-text"
              type="text"
              class="px-3 py-3 placeholder-gray-400 text-gray-700 bg-white rounded text-sm shadow focus:outline-none focus:shadow-outline w-full ease-linear transition-all duration-150"
              placeholder="email"
            /> 
            <a
            href="#"
            class="get-started text-white font-bold px-6 py-4 rounded outline-none focus:outline-none mr-1 mb-1 bg-red-500 active:bg-red-600 uppercase text-sm shadow hover:shadow-lg ease-linear transition-all duration-150"
              >
                Run!
              </a>
          </div>

i need result like here

question from:https://stackoverflow.com/questions/65643680/inputtext-and-submit-in-one-row

Answer 1

You can use Input-Groups.

something like that:

<div class="input-group mb-3">
  <input type="text" class="form-control" placeholder="Recipient's username" aria-label="Recipient's username" aria-describedby="button-addon2">
  <button class="btn btn-outline-secondary" type="button" id="button-addon2">Button</button>
</div>