Align a Span and Heading within card-header - html

Question

I would like to style Bootsrap 4's card-header so that there is a heading and span vertically aligned on same line. The header should consist of a <hX> heading for expanding card's card-body and a <span> which is non-clicable and pulled to the right:
How can I ensure the "Non-clicable body summary" span appear on same line as the "Clicable header"?
.card-header h3 {
cursor: pointer;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/js/bootstrap.bundle.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.css" rel="stylesheet" />
<div class="card">
<div class="card-header" id="headingOne">
<div class="float-right card-summary">Non-clicable body summary</div>
<a class="mb-0" data-toggle="collapse" data-target="#collapse" aria-expanded="true" aria-controls="collapse">
<h3>
Clicable header
</h3>
</a>
</div>
<div id="collapse" class="collapse" aria-labelledby="headingOne">
<div class="card-body">
<p>Some content</p>
</div>
</div>
</div>

Answer 1

Is this what you're looking for?
.card-header h3 {
cursor: pointer;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/js/bootstrap.bundle.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.css" rel="stylesheet" />
<div class="card">
<div class="align-items-center card-header d-flex justify-content-between" id="headingOne">
<a class="mb-0" data-toggle="collapse" data-target="#collapse" aria-expanded="true" aria-controls="collapse">
<h3>
Clicable header
</h3>
</a>
<div class="card-summary">Non-clicable body summary</div>
</div>
<div id="collapse" class="collapse" aria-labelledby="headingOne">
<div class="card-body">
<p>Some content</p>
</div>
</div>
</div>
Removed floats and used default BS flexbox utility classes for
section.

Answer 2

first remove float-right class.
you can use the d-flex justify-content-between class in card-header div.
<div class="card-header d-flex justify-content-between" id="headingOne">
and also add align-self-center class. <div class="card-summary align-self-center">Non-clicable body summary</div>
Working Demo
Ref : Bootstrap utilities