Display elements inline - html

Question

I was wondering if you could help.
I am looking for an easy way to display the circled elements in this picture https://db.tt/w5doYPNZ horizontally.
I have tried:
.calculator {
display: inline-block;
}
However that doesn't seem to make any difference. I have added the HTML for reference.
Thanks in advance :D
<div class="calculator">
<div class="input-group input-small">
<h4>Adult (12+)</h4>
<button class="btn theme-btn" id="decrease" value="Decrease Value">-</button>
<input type="text" id="adult" value="1" class="form-control input-usmall" min="0">
<button class="btn theme-btn" id="increase" value="Increase Value">+</button>
<h4>Child (2-11)</h4>
<button class="btn theme-btn" id="decreasec" value="Decrease Value">-</button>
<input type="text" id="child" value="0" class="form-control input-usmall" min="0" >
<button class="btn theme-btn" id="increasec" value="Increase Value">+</button>
<p>£</p><p id="total"></p><p>.00</p><button class="btn green" onclick="myFunction()">Calculate</button>
</div>
</div>

Answer 1

Put this stuff in it's own div:
<h4>Adult (12+)</h4>
<button class="btn theme-btn" id="decrease" value="Decrease Value">-</button>
<input type="text" id="adult" value="1" class="form-control input-usmall" min="0">
<button class="btn theme-btn" id="increase" value="Increase Value">+</button>
Then put this stuff it it's own div:
<h4>Child (2-11)</h4>
<button class="btn theme-btn" id="decreasec" value="Decrease Value">-</button>
<input type="text" id="child" value="0" class="form-control input-usmall" min="0" >
<button class="btn theme-btn" id="increasec" value="Increase Value">+</button>
Then this stuff in it's own div:
<p>£</p><p id="total"></p>
<p>.00</p>
<button class="btn green" onclick="myFunction()">Calculate</button>
Then float each of those divs. I would make the three newly created divs all live in the same parent div. Also, I would avoid display: inline-block, as it has issues in older browsers. Just float, and you get the same effect.

Answer 2

Here's a codepen with a working model.
The elements you're trying to affect with display: inline-block won't inherit that behavior from the .calculator parent element. You need to target them directly.
There's a lot I would change about your class naming and choice of elements, but at minimum, you need to create a separate class for calculator components, break the calculator structure into said components, and you need to convert your paragraphs to spans:
HTML:
<div class="calculator">
<div class="calculator-submodule input-group input-small">
<h4>Adult (12+)</h4>
<button class="btn theme-btn" id="decrease" value="Decrease Value">-</button>
<input type="text" id="adult" value="1" class="form-control input-usmall" min="0">
<button class="btn theme-btn" id="increase" value="Increase Value">+</button>
</div>
<div class="calculator-submodule input-group input-small">
<h4>Child (2-11)</h4>
<button class="btn theme-btn" id="decreasec" value="Decrease Value">-</button>
<input type="text" id="child" value="0" class="form-control input-usmall" min="0" >
<button class="btn theme-btn" id="increasec" value="Increase Value">+</button>
</div>
<div class="calculator-submodule">
<span>£</span>
<span id="total"></span><span>.00</span><button class="btn green" onclick="myFunction()">Calculate</button>
</div>
</div>
CSS:
.calculator-submodule {
display: inline-block;
padding-left: 1em;
text-align: center;
}

Answer 3

Try this :
.input-group.input-small {
display: inline-block;
}
With this :
<div class="calculator">
<div class="input-group input-small">
<h4>Adult (12+)</h4>
<button class="btn theme-btn" id="decrease" value="Decrease Value">-</button>
<input type="text" id="adult" value="1" class="form-control input-usmall" min="0">
<button class="btn theme-btn" id="increase" value="Increase Value">+</button>
</div>
<div class="input-group input-small">
<h4>Child (2-11)</h4>
<button class="btn theme-btn" id="decreasec" value="Decrease Value">-</button>
<input type="text" id="child" value="0" class="form-control input-usmall" min="0" >
<button class="btn theme-btn" id="increasec" value="Increase Value">+</button>
<p>£</p><p id="total"></p><p>.00</p><button class="btn green" onclick="myFunction()">Calculate</button>
</div>
</div>