html - Unable to align two div's vertically in one line -


i having 2 divs. 1 text box , button. unable align both divs vertically. need text box , button of equal height , vertically aligned in same line. wrong?

.inputholder{    border:1px solid #fff;  	vertical-align:middle;  }  .input{  	margin-top:150px;  	width:100px;  	height:50px;  	border:1px solid black;  	font-size:1.2em;  	padding:5px;  	display:inline-block;  }  .input:focus{  	outline:0;  }  .gobtn{  	height:50px;  	width:200px;  	border:1px solid black;  	display:inline-block;  }
<html>  <body>  		<div class="inputholder">  			<input type="text" class="input">  			<input type="submit" value="go" class="gobtn">  		</div>  </body>  </html>

display flex on parent make them same height , side-by-side

.inputholder {    border: 1px solid #fff;    display: flex;    justify-content: center;  }    .input {    width: 100px;    border: 1px solid black;    font-size: 1.2em;    padding: 5px;  }    .input:focus {    outline: 0;  }    .gobtn {    width: 200px;    border: 1px solid black;  }
<div class="inputholder">    <input type="text" class="input">    <input type="submit" value="go" class="gobtn">  </div>


Comments

Popular posts from this blog

Command prompt result in label. Python 2.7 -

javascript - How do I use URL parameters to change link href on page? -

amazon web services - AWS Route53 Trying To Get Site To Resolve To www -