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 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;
}






   
    SEARCH DEFINITION

user_6070660 · Answer

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

 
  //...

Then text-right class to the div containing span

 
    SEARCH DEFINITION

.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;
}






   
    SEARCH DEFINITION

user_4601544 · Answer

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:

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;
}






   
    SEARCH DEFINITION

How to align span text and input element horizontally

2 Answers