Span acting like div - html

Question

I have this code, where I planned to have three spans side by side displaying the step a person is at signing up for my website. However, the spans are acting like divs and going onto the next line. I have no idea why this is happening. To my understanding, the spans should only take up the width they need, not an entire line
<div class="row stepRow">
<div class="col-12-md ">
<div id="stepDisplay">
<span class="stepBlock">
<h3 class="headerStep">Step 1</h3>
<p class="descStep">Basic Details</p>
</span>
<span class="stepBlock">
<h3 class="headerStep">Step 2</h3>
<p class="descStep">More Details</p>
</span>
<span class="stepBlock">
<h3 class="headerStep">Step 3</h3>
<p class="descStep">Payment Details</p>
</span>
</div>
</div>
</div>
//in seperate css file
.stepBlock {
display: display;
text-align: center;
}
.headerStep .descStep {
display: inline;
}

Answer 1

You missed the comma(,) between .headerStep and .descStep. It should be like following.
.headerStep, .descStep {
display: inline;
}

Answer 2

Because you are using h3 element inside span which takes all available width. Either replace h3 or set its maximum length

Answer 3

Here is the solution you are looking for
<div class="row stepRow">
<div class="col-12-md ">
<div id="stepDisplay">
<span class="stepBlock">
<h3 class="headerStep">Step 1</h3>
<p class="descStep">Basic Details</p>
</span>
<span class="stepBlock">
<h3 class="headerStep">Step 2</h3>
<p class="descStep">More Details</p>
</span>
<span class="stepBlock">
<h3 class="headerStep">Step 3</h3>
<p class="descStep">Payment Details</p>
</span>
</div>
</div>
CSS Code
.stepBlock {
display: display;
text-align: center;
}
.headerStep .descStep {
display: inline;
}
h3,p {
display:inline;
}

Answer 4

Try this: jsfiddle
.stepBlock {
display: inline-block;
text-align: center;
width: 30%;
}
.headerStep, .descStep {
display: block;
}