align form inputs on the same column - css

Question

What's the best way to get the mins below next to the hr?
-I tried using columns and rows, but it de-centered everything.
-I tried floats, but it makes everything misaligned
-I tried boxes, but similar problems to columns and rows.
Thank you so much! :)
<form class="section-top-buffer text-center" style="margin-top:60px" id="live_form" method="POST" action="/suggest/" onsubmit="return validateForm()">
{% csrf_token %}
<!-- change the form action to your script url -->
<div class="row">
<div class="col-xs-6">
<p style="font-weight:bold">Start </p>
<p style="font-weight:bold">Hr </p>
<fieldset>
<input type="number" name="drugsrating" min="1" max="24" value="{{form.drugsrating.value}}">
</fieldset>
<p style="font-weight:bold">Min </p>
<fieldset>
<input type="number" name="petrating" min="0" max="59" value="{{form.petrating.value}}">
</fieldset>
</div>
<div class="col-xs-6">
<p style="font-weight:bold">End </p>
<p style="font-weight:bold">Hr </p>
<fieldset>
<input type="number" name="friendshiprating" min="1" max="24" value="{{form.friendshiprating.value}}">
</fieldset>
<p style="font-weight:bold">Min </p>
<fieldset>
<input type="number" name="sleeprating" min="0" max="59" value="{{form.sleeprating.value}}">
</fieldset>
</div>
</div> <!-- End all row -->
</form>

Answer 1

Replace your code with this one:
<form class="section-top-buffer text-center" style="margin-top:60px" id="live_form" method="POST" action="/suggest/" onsubmit="return validateForm()">
{% csrf_token %}
<!-- change the form action to your script url -->
<div class="row">
<div class="col-xs-6">
<p style="font-weight:bold">Start </p>
<span style="font-weight:bold">Hr </span>
<fieldset style="display:inline-block">
<input type="number" name="drugsrating" min="1" max="24" value="{{form.drugsrating.value}}">
</fieldset>
<span style="font-weight:bold">Min </span>
<fieldset style="display:inline-block">
<input type="number" name="petrating" min="0" max="59" value="{{form.petrating.value}}">
</fieldset>
</div>
<div class="col-xs-6">
<p style="font-weight:bold">End </p>
<span style="font-weight:bold">Hr </span>
<fieldset style="display:inline-block">
<input type="number" name="friendshiprating" min="1" max="24" value="{{form.friendshiprating.value}}">
</fieldset>
<span style="font-weight:bold">Min </span>
<fieldset style="display:inline-block">
<input type="number" name="sleeprating" min="0" max="59" value="{{form.sleeprating.value}}">
</fieldset>
</div>
</div> <!-- End all row -->
</form>
as #Pyromonk mentioned p is a block element so use span instead

Answer 2

p is a block element and so is fieldset. input is an inline element. If linebreaks are the problem you are facing, you should look into using a set of inline elements in succession, for example a label and an input. Block elements force a linebreak after themselves and inline elements don't, to put it in simple terms. I see absolutely no reason for using fieldset and p in your scenario, unless you absolutely have to. If you do, you can try setting their display to inline-block.
Further reading: MDN :: Visual formatting model