How to align span text and input element horizontally

Question

I am working on creating a search form. With this search form, I was using an <input> tag. Right beside the search bar, I would like to have a word of a text that reads " SEARCH DEFINITION ". At the moment my Search Definition text in a span tag is not horizontally centered to the search bar.

I've attempted to handle this by adding padding-top: 15px; which gets me a similar to look what I am going for. Is this something that is possible with a css property? I've attempted using display: inline-block; but it did not have an effect.

My expected outcome is to have the text SEARCH DEFINITION appear side by side with the search bar and aligned horizontally to the center of the search bar. Similar to this photo:

Here is a snippet of my code:

 .background { background-color:gray; width: 100%; height:200px; } span { color: white; display: inline-block; } input { width: 400px; border-radius: 4px; border: 3px solid white; font-size: 16px; background-color: #fefefe; padding: 12px 10px 12px 10px; -webkit-transition: width 0.4s ease-in-out; transition: width 0.4s ease-in-out; }

 <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/css/bootstrap.min.css" rel="stylesheet"/> <div class="background"> <div class="row"> <div class="col-md-4 padding-top"> <span class="text-bold-white-14">SEARCH DEFINITION </span> </div> <div class="col-md-8"> <div class="search-bar"> <i class="fas search fa-search"></i> <input type="text" name="search" placeholder="Search Keyword"> </div> </div> <!-- </div> --> </div> </div>

Answer 1

You can add a d-flex class to the row to align it vertically.

<div class="row d-flex align-items-center"> 
  //...
</div>

Then text-right class to the div containing span

<div class="col-md-4 text-right"> 
    <span class="text-bold-white-14">SEARCH DEFINITION </span>
  </div>

 .background { background-color:gray; width: 100%; height:200px; } span { color: white; display: inline-block; } input { width: 400px; border-radius: 4px; border: 3px solid white; font-size: 16px; background-color: #fefefe; padding: 12px 10px 12px 10px; -webkit-transition: width 0.4s ease-in-out; transition: width 0.4s ease-in-out; }

 <link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.0/css/bootstrap.min.css" rel="stylesheet"/> <div class="background"> <div class="row d-flex align-items-center"> <div class="col-md-4 text-right"> <span class="text-bold-white-14">SEARCH DEFINITION </span> </div> <div class="col-md-8"> <div class="search-bar"> <i class="fas search fa-search"></i> <input type="text" name="search" placeholder="Search Keyword"> </div> </div> <!-- </div> --> </div> </div>

Answer 2

You only need to add one class to your .row div, the class is .align-items-center , since row has display property set to flex by bootstrap, you already have it as a flex. So to align them vertically centered just add above class in the row div like this:

<div class="row align-items-center">
</div>

and by adding class text-right to span's parent element make the text "SEARCH DEFINITION" aligned to the right side.

Here's working code:

 .background { background-color:gray; width: 100%; height:200px; } span { color: white; display: block; text-align: right; } input { width: 400px; border-radius: 4px; border: 3px solid white; font-size: 16px; background-color: #fefefe; padding: 12px 10px 12px 10px; -webkit-transition: width 0.4s ease-in-out; transition: width 0.4s ease-in-out; }

 <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/css/bootstrap.min.css" rel="stylesheet"/> <div class="background"> <div class="row align-items-center"> <div class="col-md-4 padding-top text-right"> <span class="text-bold-white-14">SEARCH DEFINITION </span> </div> <div class="col-md-8"> <div class="search-bar"> <i class="fas search fa-search"></i> <input type="text" name="search" placeholder="Search Keyword"> </div> </div> <!-- </div> --> </div> </div>