Trying to align the label vertically with the input on the right side. After searching for solutions, I couldn't find anything that works perfectly for my scenario. Here is what I have tried so far, but the label text remains aligned to the top.
CSS:
label{
float:left;
width:50%;
min-height: 20px;
vertical-align: middle;
clear: both;
text-align:right;
display: table-cell;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
padding-right: 10px;
}
input[type="text"]{
width:50%;
}
.pers_form{
width:100%;
overflow:hidden;
margin-bottom:5px;
display: table;
}
HTML:
<div class="pers_form">
<label for "example">Example</label>
<input type="text" id="example" name="example" />
</div>