Align span to right and align header left verticallly - html

Question

I'm trying to align span to right of div, the span is within a button.
I have managed to do the above, but I'm having problem vertically aligning the header at the same time keeping it to the left.
.spec-li>li>span {
padding: 5px 0 0 0;
}
.spec-label {
display: block;
float: left;
width: 50%;
font-weight: 700;
font-size: 12px;
}
.spec-value {
display: block;
float: right;
width: 50%;
text-align: right;
font-size: 12px;
}
.card-header-spec {
display: flex;
justify-content: space-between
}
.card-spec-button-font-size {
font-size: 30px
}
.spec-card {
border-width: 0;
border-top-width: 1px;
background-color: none;
}
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" integrity="sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS" crossorigin="anonymous">
<section>
<div class="accordion" id="accordionWeight">
<div class="card spec-card">
<div class="card-header card-header-spec" id="headingOne">
<h5 class="mb-0">Weight</h5>
<button class="btn btn-link" type="button" data-toggle="collapse" data-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
<span class="card-spec-button-font-size">+</span>
</button>
</div>
<div id="collapseOne" class="collapse show" aria-labelledby="headingOne" data-parent="#accordionWeight">
<div class="card-body">
<ul class="list-unstyled spec-li">
<li>
<span class="spec-label">Base Weight</span>
<span class="spec-value">2351 lbs (1064kg)</span>
</li>
<li>
<span class="spec-label">Useful Load</span>
<span class="spec-value">1249 lbs (569kg)</span>
</li>
<li>
<span class="spec-label">Cabin payload with 3 hr trip fuel and 45 min reserve</span>
<span class="spec-value">895 lbs (409 kg)</span>
</li>
</ul>
</div>
</div>
</div>
</div>
</section>
I have attached a screen shot of how it currently looks:
can anyone help with this problem as it would be much appreciated

Answer 1

If you want to align the h5 vertically in the center. Do this.
.card-header-spec {
display: flex;
justify-content: space-between;
}
As you see in the code aboe, card-header-spac,parent of h5, is flex. In bootstrap-4, you use align-items-center to align content of a flex element vertically in its center.
.spec-li>li>span {
padding: 5px 0 0 0;
}
.spec-label {
display: block;
float: left;
width: 50%;
font-weight: 700;
font-size: 12px;
}
.spec-value {
display: block;
float: right;
width: 50%;
text-align: right;
font-size: 12px;
}
.card-header-spec {
display: flex;
justify-content: space-between
}
.card-spec-button-font-size {
font-size: 30px
}
.spec-card {
border-width: 0;
border-top-width: 1px;
background-color: none;
}
If you want to use custom CSS, use align-items: center for the card-header-spec class.
.card-header-spec {
display: flex;
justify-content: space-between;
align-items: center;
}

Answer 2

In CSS, to vertically align, add align-items: center inside card-header-spec.
Below is the modified CSS
.spec-li>li>span {
padding: 5px 0 0 0;
}
.spec-label {
display: block;
float: left;
width: 50%;
font-weight: 700;
font-size: 12px;
}
.spec-value {
display: block;
float: right;
width: 50%;
text-align: right;
font-size: 12px;
}
.card-header-spec {
display: flex;
justify-content: space-between;
align-items: center;
}
.card-spec-button-font-size {
font-size: 30px
}
.spec-card {
border-width: 0;
border-top-width: 1px;
background-color: none;
}

Answer 3

try using the vertical-align property, visit: https://www.w3schools.com/cssref/pr_pos_vertical-align.asp