Align Spans using Bootstrap - html

Question

I am working on a webpage that displays the users' personal information, and I would like to align vertically the spans colored in red using Bootstrap.
The following is a screenshot of my form:
and here is the HTML/CSS code I am using:
HTML
<table class="table">
<tbody>
<div class="col-sm-6 test">
<span class=""><strong >First Name: </strong></span>
<span class="" style="color:red" >FirstName</span>
</div>
<div class="col-sm-6 test">
<strong class="">Age: </strong>
<span class="" style="color:red">Age</span>
</div>
<div class="col-sm-6 test">
<strong class="">Last Name: </strong>
<span class="" style="color:red">LastName</span>
</div>
<div class="col-sm-6 test" >
<strong class="">Status: </strong>
<span class="" style="color:red">Status</span>
</div>
</tbody>
</table>
CSS
.test{
border-top: 1px solid #e2eae9; vertical-align: middle; padding: 6px 8px;
}

Answer 1

You can try using display table-row and display table-cell
Result: jsfiddle
.test{
border-top: 1px solid #e2eae9; vertical-align: middle; padding: 6px 8px;
display: table-row;
}
Result: jsfiddle
.test span{
display: table-cell;
}
Alternatively using bootstrap, you can make your test div as rows and your span as columns:
<div class="row test">
<span class="col-sm-6"><strong >First Name: </strong></span>
<span class="col-sm-6" style="color:red" >FirstName</span>
</div>

Answer 2

If you mean to stack the red text under the "labels" then you could do something like this:
<table class="table">
<tbody>
<div class="col-sm-6 test">
<span class="col-sm-12"><strong >First Name: </strong></span>
<span class="col-sm-12" style="color:red" >FirstName</span>
</div>
<div class="col-sm-6 test">
<strong class="col-sm-12">Age: </strong>
<span class="col-sm-12" style="color:red">Age</span>
</div>
<div class="col-sm-6 test">
<strong class="col-sm-12">Last Name: </strong>
<span class="col-sm-12" style="color:red">LastName</span>
</div>
<div class="col-sm-6 test" >
<strong class="col-sm-12">Status: </strong>
<span class="col-sm-12" style="color:red">Status</span>
</div>
</tbody>
</table>