I am currently working with a set of cards to create an accordion. Each card consists of a card header and a card body.
Within each card header, there are four elements: an <i> tag for a carat icon, an <h4> tag displaying the title of the card, an <input> tag for user input data, and a final <h4> tag representing a % character.
The goal is to have the first two elements (<i> and the first <h4>) float left, with the text wrapping in line with the remaining space between elements. The <input> and final <h4> should remain fixed at the right end of the line. It's important that all four elements always remain on the same line without stacking, and adapt their display across different devices.
After spending several hours researching and experimenting with various CSS classes like .d-flex, .clearfix, .float-left/right, as well as different container structures, I've encountered difficulties in achieving the desired layout. Issues include aligning the elements properly and ensuring proper text truncation with .text-truncate.
How can I structure the cards to consistently achieve the desired layout?
Here is a snippet of the code for the card header:
<div class="card-header">
<div class="row">
<div class="col-sm-4 col-md-6">
<a class="card-link" data-toggle="collapse" data-target="#collapseFive" aria-expanded="true" aria-controls="collapseFive">
<div class="row" style="display: block;">
<i class="far fa-caret-square-down fa-2x mr-1"></i>
<h4 class="text-truncate">Education, Emp., Social Services</h4>
</div>
</a>
</div>
<div class="col-sm-4 col-md-6">
<div class="row justify-content-center justify-content-md-end align-items-center">
<input type="number" name="cat-edTrainEmp" class="form-control-sm mr-1 survey" id="cat-edTrainEmp" max="100" min="0" required><h4>%</h4>
</div>
</div>
</div>
</div>
The expected outcome for the card header should resemble this example: card header structure