Responsive text field with icons and counter field - html

Question

I am trying to create an input field where user can increment or decrement the number. The input field should look like following design in a responsive way
However, it looks weird when I did the following way
<link href="//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.min.css" rel="stylesheet" type="text/css" />
<div class="input-with-icon">
<div class="labelled-input">
<div class="labelling">
<div class="content">
<i class="fa fa-user fa-lg fa-fw" aria-hidden="true"></i>
<div class="text-wrapper">
<p class="adult">Adult</p>
<p>16+year</p>
</div>
</div>
</div>
<div class="augment">
<i class="fa fa-minus"></i>
</div>
<input type="text" class="input" disabled/>
<div class="augment">
<i class="fa fa-plus"></i>
</div>
</div>
</div>
Here is the demo
https://jsbin.com/fiwabararo/edit?html,css,output

Answer 1

Please check this code snippet
function counter(i){
var el =document.getElementsByClassName('input');
(i == '+')
? el[0].value = parseInt(el[0].value) + 1
: el[0].value = parseInt(el[0].value) - 1;
}
.input-with-icon {
position: relative;
width: 100%;
display: flex;
}
.labelled-input {
position: relative;
font-weight: 400;
font-style: normal;
display: inline-flex;
border: solid 1px #99acbd;
border-radius: 2px;
background:#eceef2;
}
.labelling {
display: inline-block;
line-height: 1;
vertical-align: baseline;
background-image: none;
color: rgba(0, 0, 0, 0.6);
text-transform: none;
font-weight: 700;
border: 0 solid transparent;
flex: 0 0 auto;
margin: 0;
}
.labelling:first-child {
border-top-right-radius: 0;
border-bottom-right-radius: 0;
}
.content {
display: flex;
align-items: center;
padding:0 12px
}
.augment {
background: #ccd5de;
text-align:center;
cursor: pointer;
height: 40px;
width: 40px;
border-radius: 50%;
margin: 10px;
margin-top:18px
}
.augment:hover {
background: #478dcf;
}
.augment i {
line-height:2.6;
color:#fff
}
.input {
margin: 0;
border: none;
outline: 0;
box-shadow: none;
font-size: 22px;
font-weight: bold;
text-align: center;
}
.input:disabled {
background: #fff;
}
#media(max-width:480px){
.input {
width:56%;
}
.augment {
width: 14%;
}
}
<link href="//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.min.css" rel="stylesheet" type="text/css" />
<div class="input-with-icon">
<div class="labelled-input">
<div class="labelling">
<div class="content">
<i class="fa fa-user fa-lg fa-fw" aria-hidden="true"></i>
<div class="text-wrapper">
<p class="adult">Adult</p>
<p>16+year</p>
</div>
</div>
</div>
<div class="augment" onclick="counter('-')">
<i class="fa fa-minus"></i>
</div>
<input type="text" class="input" disabled value="0" />
<div class="augment" onclick="counter('+')">
<i class="fa fa-plus"></i>
</div>
</div>
</div>