I'm struggling with aligning inputs under long labels in a form. I want the input fields centered under each label while keeping them inline. The desired look is shown below:
https://i.sstatic.net/itJCY.png
The current code I have is not achieving the desired center alignment under the labels.
.question-container {
width: 1000px;
margin: 0 auto;
}
#questions {
margin: 5px 30px;
display: inline-block
}<div class="form-inline">
<span id="questions">
<label>How much will your house cost?</label>
<input class="form-control" type="text" placeholder="input">
</span>
<span id="questions">
<label>What is the most you can pay monthly?</label>
<input class="form-control" type="text" placeholder="input">
</span>
<span id="questions">
<label>What is your Current Monthly Rent?</label>
<input class="form-control" type="text" placeholder="input">
</span>
</div>
<div id='centered'>
<button type="submit" class="btn btn-primary mb-2">Submit</button>
</div>If anyone could help me out, that would be greatly appreciated!