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:

<divclass="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: 12px10px12px10px;
    -webkit-transition: width 0.4s ease-in-out;
    transition: width 0.4s ease-in-out;
}

<linkhref="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/css/bootstrap.min.css"rel="stylesheet"/><divclass="background"><divclass="row align-items-center"><divclass="col-md-4 padding-top text-right"><spanclass="text-bold-white-14">SEARCH DEFINITION </span></div><divclass="col-md-8"><divclass="search-bar"><iclass="fas search fa-search"></i><inputtype="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

<divclass="col-md-4 text-right"><spanclass="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: 12px10px12px10px;
    -webkit-transition: width 0.4s ease-in-out;
    transition: width 0.4s ease-in-out;
}

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