Q:

vertical align not working in div

i am trying to texbox over to button but my case first line texbox then next line in button 
html:-
 <div class="styled-input" id="surnamediv">
                                <input type="text" id="surName" /><button id="add" class="hidden">Add</button>
                                <label>Surname</label>
                                <span></span>
                            </div>

css:-
.custom-input #surnamediv #add{
        vertical-align:middle;
    }

A:

Try these styles
#surnamediv {
   display: flex;
   align-items: center;
}
#surnamediv label {
    margin-left: 10px;
}

#surnamediv {
  display: flex;
  align-items: center;
}

#surnamediv label {
  margin-left: 10px;
}
<div class="styled-input" id="surnamediv">
  <input type="text" id="surName" /><button id="add" class="hidden">Add</button>
  <label>Surname</label>
  <span></span>
</div>

