How to keep few inputs horizontally using CSS - html

Question

I am developing a website and I want to keep few inputs horizontally.
This is my CSS code
.input-group {
position: relative;
margin: 40px 0 20px;
}
input {
display: inline block;
width: 12%;
background: #EAF6F6;
font-size: 18px;
padding: 10px 10px 10px 5px;
display: block;
border: 0px solid #757575;
border-radius: 5px;
}
input:focus {
outline: none;
}
label {
color: #999;
font-size: 18px;
font-weight: normal;
position: absolute;
pointer-events: none;
left: 5px;
top: 10px;
transition: 0.2s ease all;
-moz-transition: 0.2s ease all;
-webkit-transition: 0.2s ease all;
}
input:focus ~ label,
input:valid ~ label {
top: -20px;
font-size: 14px;
color: #4285f4;
}
.bar {
position: relative;
display:block;
width:14%;
}
.bar:before,
.bar:after {
content: '';
height: 2px;
width: 0;
bottom: 1px;
position: absolute;
background: #4285f4;
transition: 0.2s ease all;
-moz-transition: 0.2s ease all;
-webkit-transition: 0.2s ease all;
}
.bar:before {
left: 50%;
}
.bar:after {
right: 50%;
}
input:focus ~ .bar:before,
input:focus ~ .bar:after {
width: 50%;
}
.highlight {
position: absolute;
height: 60%;
width: 100px;
top: 25%;
left: 0;
pointer-events: none;
opacity: 0.5;
}
input:focus ~ .highlight {
-webkit-animation: inputHighlighter 0.3s ease;
-moz-animation: inputHighlighter 0.3s ease;
animation: inputHighlighter 0.3s ease;
}
/* animations */
#-webkit-keyframes inputHighlighter {
from { background: #4285f4; }
to { width: 0; background: transparent; }
}
#-moz-keyframes inputHighlighter {
from { background: #4285f4; }
to { width: 0; background: transparent; }
}
#keyframes inputHighlighter {
from { background: #4285f4; }
to { width: 0; background: transparent; }
}
This is my HTML code
<div class="input-group">
<input type="text" required>
<span class="highlight"></span>
<span class="bar"></span>
<label>Quantity</label>
</div>
<div class="input-group">
<input type="text" required>
<span class="highlight"></span>
<span class="bar"></span>
<label>price</label>
</div>
<div class="input-group">
<input type="text" required>
<span class="highlight"></span>
<span class="bar"></span>
<label>Total</label>
</div>
<div class="input-group">
<input type="text" required>
<span class="highlight"></span>
<span class="bar"></span>
<label>Quantity</label>
</div>
<div class="input-group">
<input type="text" required>
<span class="highlight"></span>
<span class="bar"></span>
<label>price</label>
</div>
<div class="input-group">
<input type="text" required>
<span class="highlight"></span>
<span class="bar"></span>
<label>Total</label>
</div>
But all inputs are in vertically. As this
But I Expect like this
I tried several ways. But unable to do. How to solve it. I found some bootstrap solutions. But I Do not expect Bootstrap. Expect pure CSS.

Answer 1

Wrap the inputs you wish to be displayed horizontally on the page within a flex group div.
See the css class flex-group in the example snippit below
Css-Tricks on flexbox
Mozilla flexbox
/* display:flex for this class */
.flex-group {
display: flex;
margin: 10px auto; /* set to 10px auto here */
}
.input-group {
position: relative;
margin: auto; /* set margin to auto here */
}
input {
display: inline block;
background: #EAF6F6;
width: 90%; /* set to 80% width */
font-size: 18px;
padding: 10px 10px 10px 5px;
border: 0px solid #757575;
border-radius: 5px;
}
input:focus {
outline: none;
}
label {
color: #999;
font-size: 18px;
font-weight: normal;
position: absolute;
pointer-events: none;
left: 5px;
top: 10px;
transition: 0.2s ease all;
-moz-transition: 0.2s ease all;
-webkit-transition: 0.2s ease all;
}
input:focus~label,
input:valid~label {
top: -20px;
font-size: 14px;
color: #4285f4;
}
.bar {
position: relative;
display: block;
width: 14%;
}
.bar:before,
.bar:after {
content: '';
height: 2px;
width: 0;
bottom: 1px;
position: absolute;
background: #4285f4;
transition: 0.2s ease all;
-moz-transition: 0.2s ease all;
-webkit-transition: 0.2s ease all;
}
.bar:before {
left: 50%;
}
.bar:after {
right: 50%;
}
input:focus~.bar:before,
input:focus~.bar:after {
width: 50%;
}
.highlight {
position: absolute;
height: 60%;
width: 100px;
top: 25%;
left: 0;
pointer-events: none;
opacity: 0.5;
}
input:focus~.highlight {
-webkit-animation: inputHighlighter 0.3s ease;
-moz-animation: inputHighlighter 0.3s ease;
animation: inputHighlighter 0.3s ease;
}
/* animations */
#-webkit-keyframes inputHighlighter {
from {
background: #4285f4;
}
to {
width: 0;
background: transparent;
}
}
#-moz-keyframes inputHighlighter {
from {
background: #4285f4;
}
to {
width: 0;
background: transparent;
}
}
#keyframes inputHighlighter {
from {
background: #4285f4;
}
to {
width: 0;
background: transparent;
}
}
This is my HTML code
<div class="flex-group"><!--/ added div with class of flex-group => display: flex; /-->
<div class="input-group">
<input type="text" required>
<span class="highlight"></span>
<span class="bar"></span>
<label>Quantity</label>
</div>
<div class="input-group">
<input type="text" required>
<span class="highlight"></span>
<span class="bar"></span>
<label>price</label>
</div>
<div class="input-group">
<input type="text" required>
<span class="highlight"></span>
<span class="bar"></span>
<label>Total</label>
</div>
</div><!--/ END flex-group /-->
<div class="flex-group"><!--/ start new flex-group class /-->
<div class="input-group">
<input type="text" required>
<span class="highlight"></span>
<span class="bar"></span>
<label>Quantity</label>
</div>
<div class="input-group">
<input type="text" required>
<span class="highlight"></span>
<span class="bar"></span>
<label>price</label>
</div>
<div class="input-group">
<input type="text" required>
<span class="highlight"></span>
<span class="bar"></span>
<label>Total</label>
</div>
</div><!--/ END flex-group /-->