How To Align Span Text And Input Element Horizontally

I am working on creating a search form. With this search form, I was using an tag. Right beside the search bar, I would like to have a word of a text that reads ' SEA

Solution 1:

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>

Solution 2:

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>