I am currently working on a layout that includes a list item with the title "Item 0", followed by a small tag containing the text "Description Item 0", and two select menus positioned to the right. The challenge I am facing is placing the small tag below the title "Item 0" while maintaining the vertical alignment of the elements. Using a <br> tag does not work in this case since the title and the small tag are different span elements. Does anyone know a solution to ensure that the small tag appears below the title "Item 0" while still aligning the elements vertically?
For reference, you can view an example at: https://jsfiddle.net/uxvh0gmj/1/
Here is the HTML code:
<div class="container py-5">
<div class="row no-gutters">
<div class="col-12 col-lg-8">
<div class="card">
<div class="card-header">
<h5 class="text-heading-blue mb-0 font-weight-semi-bold">Title</h5>
</div>
<div class="card-body">
<ul class="list-group">
<li class="list-group-item d-flex justify-content-between align-items-center">
<span class="title">Item 0</span>
<br>
<span><small>Description Item 0</small></span>
<form>
<select class="custom-select form-control" style="width:100px;">
<option selected="">0</option>
<option>1</option>
<option>2</option>
</select>
</form>
<form>
<select class="custom-select form-control" style="width:100px;"> <option selected="">0</option>
<option>1</option>
<option>2</option>
</select>
</form>
</li>
</ul>
</div>
<div class="card-footer">
<button type="button" class="float-right btn">Next</button>
</div>
</div>
</div>
And here is the relevant CSS:
.title{
color:gray;
font-weight:bold;
}