How Can I align vertically using HTML, CSS Boostrap - html

Question

All bold fields need to be aligned vertically. following is the piece of code that I tried
If text is overflowed (Text which is not in bold) then it should show ...
I tried using CSS, bootstrap

Answer 1

You can use Bootstrap row and columns:
<div class="container">
<div class="row row-cols-auto">
<div class="col">
<p class="header">Guest Name</p>
<p class="text">Nilesh Belurkar</p>
</div>
<div class="col">
<p class="header">Claim Number</p>
<p class="text">123456789</p>
</div>
<div class="col">
<p class="header">Phone</p>
<p class="text">7218811333</p>
</div>
...
</div>
</div>
Here what you are doing is creating a parent div with the class row-cols-auto, that will adjust the amount of columns per row to be shown automatically.
Then in each child element, you assign the class "col" to indicate Bootstrap that those divs have to be treated like columns.
Then in each column element, just put your child elements, as the "col" class already has the display: block property already set by default.
You can check more details in Bootstrap docs: https://getbootstrap.com/docs/5.0/layout/grid/#row-columns
Live preview: https://playcode.io/1150513

Answer 2

Try this:
<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.2.3/css/bootstrap-grid.min.css" rel="stylesheet"/>
<div class="container">
<div class="row row-cols-auto">
<div class="col">
<p>Guest Name</p>
<!-- <p class="text">Nilesh Belurkar</p> -->
<p>Company Name</p>
</div>
<div class="col">
<p>Nilesh Belurkar</p>
<!-- <p>Claim Number</p> -->
<p class="text">ABC Company</p>
</div>
<div class="col">
<p>Claim Number</p>
<!-- <p>Claim Number</p> -->
<p class="text">Phone</p>
</div>
<div class="col">
<p>123444</p>
<!-- <p>Claim Number</p> -->
<p class="text">[phone]</p>
</div>
</div>