make input and span next to each other - html

Question

Trying to align input and span next to each other. Span is positioned below input ,how to align span on right side of input. I wanted to create a search bar with this input and span tag hence want to align next to each other
I have placed both of them inside one division yet it is not positioned correctly
is there any css property missing out or any css is given incorrectly in my code
.modal-body .search-input{
width:100%
}
#custom-search-input {
margin:0;
margin-top: 10px;
padding: 0;
}
.form-control{
border-radius: 0;
}
#custom-search-input .search-query {
padding-right: 3px;
padding-right: 4px \9;
padding-left: 3px;
padding-left: 4px \9;
border: 1px solid #494949 ;
/* border-right-style: none; */
margin-bottom: 0;
}
#custom-search-input button {
background-color:rgb(0,0,0,0.3) ;
height: calc(1.5em + .75rem + 2px);
padding: 2px 10px;
position: relative;
vertical-align: middle;
}
.ion-android-search{
font-size: 150%;
}
.btn-danger{
border:none;
border-radius: 0;
}
.input-group-btn{
float: right;
position: relative;
}
.search-query:focus + button {
z-index: 3;
}
.search-form {
width: 80%;
}
.search-form input:focus + .results { display: block }
.search-form .results {
display: none;
/* position: absolute; */
top: 35px;
left: 0;
cursor: pointer;
right: 0;
z-index: 10;
padding: 0;
margin: 0;
margin-top: 5px;
border-width: 1px;
border-style: solid;
border-color: #cbcfe2 #c8cee7 #c4c7d7;
border-radius: 3px;
background-color: #fdfdfd;
background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #fdfdfd), color-stop(100%, #eceef4));
background-image: -webkit-linear-gradient(top, #fdfdfd, #eceef4);
background-image: -moz-linear-gradient(top, #fdfdfd, #eceef4);
background-image: -ms-linear-gradient(top, #fdfdfd, #eceef4);
background-image: -o-linear-gradient(top, #fdfdfd, #eceef4);
background-image: linear-gradient(top, #fdfdfd, #eceef4);
-webkit-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
-moz-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
-ms-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
-o-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
}
.search-form .results li { display: block }
.search-form .results li:first-child { margin-top: -1px }
.search-form .results li:first-child:before, .search-form .results li:first-child:after {
display: block;
content: '';
width: 0;
height: 0;
position: absolute;
left: 50%;
margin-left: -5px;
border: 5px outset transparent;
}
.search-form .results li:first-child:before {
border-bottom: 5px solid #c4c7d7;
top: -2px;
}
.search-form .results li:first-child:after {
border-bottom: 5px solid #fdfdfd;
top: -10px;
}
.search-form .results li:first-child:hover:before, .search .results li:first-child:hover:after { display: none }
.search-form .results li:last-child { margin-bottom: -1px }
.search-form .results li {
display: block;
position: relative;
margin: 0 -1px;
padding: 6px 40px 6px 10px;
color: #808394;
font-weight: 500;
text-shadow: 0 1px #fff;
border: 1px solid transparent;
border-radius: 3px;
}
.search-form .results li span { font-weight: 200 }
.search-form .results li:before {
content: '';
width: 18px;
height: 18px;
position: absolute;
top: 50%;
right: 10px;
margin-top: -9px;
/* background: url("https://cssdeck.com/uploads/media/items/7/7BNkBjd.png") 0 0 no-repeat; */
}
.search-form .results li:hover {
text-decoration: none;
color: #fff;
text-shadow: 0 -1px rgba(0, 0, 0, 0.3);
border-color: #28be9a #28be9a #28be9a;
background-color: #28be9a;
/* background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #59aaf4), color-stop(100%, #338cdf));
background-image: -webkit-linear-gradient(top, #59aaf4, #338cdf);
background-image: -moz-linear-gradient(top, #59aaf4, #338cdf);
background-image: -ms-linear-gradient(top, #59aaf4, #338cdf);
background-image: -o-linear-gradient(top, #59aaf4, #338cdf);
background-image: linear-gradient(top, #59aaf4, #338cdf); */
-webkit-box-shadow: inset 0 1px rgba(255, 255, 255, 0.2), 0 1px rgba(0, 0, 0, 0.08);
-moz-box-shadow: inset 0 1px rgba(255, 255, 255, 0.2), 0 1px rgba(0, 0, 0, 0.08);
-ms-box-shadow: inset 0 1px rgba(255, 255, 255, 0.2), 0 1px rgba(0, 0, 0, 0.08);
-o-box-shadow: inset 0 1px rgba(255, 255, 255, 0.2), 0 1px rgba(0, 0, 0, 0.08);
box-shadow: inset 0 1px rgba(255, 255, 255, 0.2), 0 1px rgba(0, 0, 0, 0.08);
}
:-moz-placeholder {
color: #a7aabc;
font-weight: 200;
}
::-webkit-input-placeholder {
color: #a7aabc;
font-weight: 200;
}
.lt-ie9 .search input { line-height: 26px }
<div class="modal fade" id="search-bar" role="dialog">
<div class="modal-dialog search-modal">
<div class="modal-content search-modal">
<div class="modal-body">
<div id="custom-search-input">
<div class="input-group col-md-12 ">
<form class="search-form">
<input type="text" id="myInput" class=" search-query form-control search-input" placeholder="Search" />
<span class="input-group-btn">
<button class="btn btn-danger" type="button">
<i class="ion-android-search "></i>
</button>
</span>
<ul class="results" >
</ul>
</form>
</div>
</div>
</div>
</div>
</div>
</div>

Answer 1

Add display: flex; to your .search-form
Take a look at flexbox, it is a more modern method for solving a lot of layout challenges.
https://css-tricks.com/snippets/css/a-guide-to-flexbox/
#custom-search-input {
margin:0;
margin-top: 10px;
padding: 0;
}
.form-control{
border-radius: 0;
}
#custom-search-input .search-query {
padding-right: 3px;
padding-right: 4px \9;
padding-left: 3px;
padding-left: 4px \9;
border: 1px solid #494949 ;
/* border-right-style: none; */
margin-bottom: 0;
}
#custom-search-input button {
background-color:rgb(0,0,0,0.3) ;
height: calc(1.5em + .75rem + 2px);
padding: 2px 10px;
position: relative;
vertical-align: middle;
}
.ion-android-search{
font-size: 150%;
}
.btn-danger{
border:none;
border-radius: 0;
}
.search-query:focus + button {
z-index: 3;
}
.search-form {
width: 100%;
display: flex;
flex-wrap: wrap;
}
.search-input{
flex-grow: 1;
}
.search-form input:focus + .results { display: block }
.search-form .results {
display: none;
/* position: absolute; */
top: 35px;
left: 0;
cursor: pointer;
right: 0;
z-index: 10;
padding: 0;
margin: 0;
margin-top: 5px;
border-width: 1px;
border-style: solid;
border-color: #cbcfe2 #c8cee7 #c4c7d7;
border-radius: 3px;
background-color: #fdfdfd;
background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #fdfdfd), color-stop(100%, #eceef4));
background-image: -webkit-linear-gradient(top, #fdfdfd, #eceef4);
background-image: -moz-linear-gradient(top, #fdfdfd, #eceef4);
background-image: -ms-linear-gradient(top, #fdfdfd, #eceef4);
background-image: -o-linear-gradient(top, #fdfdfd, #eceef4);
background-image: linear-gradient(top, #fdfdfd, #eceef4);
-webkit-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
-moz-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
-ms-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
-o-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
}
.search-form .results li { display: block }
.search-form .results li:first-child { margin-top: -1px }
.search-form .results li:first-child:before, .search-form .results li:first-child:after {
display: block;
content: '';
width: 0;
height: 0;
position: absolute;
left: 50%;
margin-left: -5px;
border: 5px outset transparent;
}
.search-form .results li:first-child:before {
border-bottom: 5px solid #c4c7d7;
top: -2px;
}
.search-form .results li:first-child:after {
border-bottom: 5px solid #fdfdfd;
top: -10px;
}
.search-form .results li:first-child:hover:before, .search .results li:first-child:hover:after { display: none }
.search-form .results li:last-child { margin-bottom: -1px }
.search-form .results li {
display: block;
position: relative;
margin: 0 -1px;
padding: 6px 40px 6px 10px;
color: #808394;
font-weight: 500;
text-shadow: 0 1px #fff;
border: 1px solid transparent;
border-radius: 3px;
}
.search-form .results li span { font-weight: 200 }
.search-form .results li:before {
content: '';
width: 18px;
height: 18px;
position: absolute;
top: 50%;
right: 10px;
margin-top: -9px;
/* background: url("https://cssdeck.com/uploads/media/items/7/7BNkBjd.png") 0 0 no-repeat; */
}
.search-form .results li:hover {
text-decoration: none;
color: #fff;
text-shadow: 0 -1px rgba(0, 0, 0, 0.3);
border-color: #28be9a #28be9a #28be9a;
background-color: #28be9a;
/* background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #59aaf4), color-stop(100%, #338cdf));
background-image: -webkit-linear-gradient(top, #59aaf4, #338cdf);
background-image: -moz-linear-gradient(top, #59aaf4, #338cdf);
background-image: -ms-linear-gradient(top, #59aaf4, #338cdf);
background-image: -o-linear-gradient(top, #59aaf4, #338cdf);
background-image: linear-gradient(top, #59aaf4, #338cdf); */
-webkit-box-shadow: inset 0 1px rgba(255, 255, 255, 0.2), 0 1px rgba(0, 0, 0, 0.08);
-moz-box-shadow: inset 0 1px rgba(255, 255, 255, 0.2), 0 1px rgba(0, 0, 0, 0.08);
-ms-box-shadow: inset 0 1px rgba(255, 255, 255, 0.2), 0 1px rgba(0, 0, 0, 0.08);
-o-box-shadow: inset 0 1px rgba(255, 255, 255, 0.2), 0 1px rgba(0, 0, 0, 0.08);
box-shadow: inset 0 1px rgba(255, 255, 255, 0.2), 0 1px rgba(0, 0, 0, 0.08);
}
:-moz-placeholder {
color: #a7aabc;
font-weight: 200;
}
::-webkit-input-placeholder {
color: #a7aabc;
font-weight: 200;
}
.lt-ie9 .search input { line-height: 26px }
<div class="modal fade" id="search-bar" role="dialog">
<div class="modal-dialog search-modal">
<div class="modal-content search-modal">
<div class="modal-body">
<div id="custom-search-input">
<div class="input-group col-md-12 ">
<form class="search-form">
<input type="text" id="myInput" class=" search-query form-control search-input" placeholder="Search" />
<span class="input-group-btn">
<button class="btn btn-danger" type="button">
<i class="ion-android-search "></i>
</button>
</span>
</form>
<ul class="results" >
<li>Result</li>
</ul>
</div>
</div>
</div>
</div>
</div>
</div>