Div not appearing in line with paragraph - html

Question

I'm trying to get a div to appear in-line with a <p> but for some reason it keeps skipping whenever it's generated. I need "Normal" to appear on the same line as "condition is:" but it's showing up on the next line.
/* CSS used here will be applied after bootstrap.css */
emergency {
color: #1D1060;
}
.alert-color {
color: #0F75BC;
}
.normal {
color: #6DC2E9;
}
.sys-cond-list ul li span {
color: #4B5D6B;
}
.sys-cond-list {
font-size: 12px;
}
#currState {
color: #3379A3;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" rel="stylesheet" />
<div class="row">
<div class="col-sm-10" style="float: left">
<div class="system-cond" style="position: absolute">
<p style="text-align: left;">
Our current<br>condition is:
<strong><div id="currState">Normal</div></strong>
</p>
<p></p>
</div>
</div>
</div>
</div>

Answer 1

You could do something like below. Your elements need a float:left;.
Though there are far better ways to handle this. You should really change your HTML to use span instead of div to achieve the final solution.
/* CSS used here will be applied after bootstrap.css */emergency{
color: #1D1060;
}
.alert-color{
color: #0F75BC;
}
.normal{
color:#6DC2E9;
}
.sys-cond-list ul li span{
color: #4B5D6B;
}
.sys-cond-list{
font-size: 12px;
}
#currState{
color: #3379A3;
float:left;
margin:24px 0 0 10px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" rel="stylesheet"/>
<div class="row">
<div class="col-sm-10" style="float: left">
<div class="system-cond" style="position: absolute">
<p style="text-align: left;float:left;">Our current<br>condition is: <strong>
</strong></p><div id="currState"><strong>Normal</strong></div><p></p>
</div>
</div>
</div>
</div>

Answer 2

Your <p> and #currState are block level elements, meaning they will take up the full-width of screen and so naturally "Normal" will be on next line.
A hack fix would be to set both elements to display: inline-block; but I think your code could use a restructuring. You are using inline styles and <br> when not necessary and <strong> tags when you can just modify the font-weight in css, you have empty <p> tags, etc.
p {
display: inline-block;
}
#currState{
display: inline-block;
}