I am trying to adjust the width of stacked multiple divs dynamically based on the longest content, like shown in this image: https://i.sstatic.net/QhGCe.png
After doing some research, I found that using inline-block is recommended. Here is my initial attempt with Bootstrap 4:
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js" integrity="sha384-OgVRvuATP1z7JjHLkuOU7Xw704+h835Lr+6QL9UvYjZE3Ipu6Tp75j7Bh/kR0JKI" crossorigin="anonymous"></script>
<style>
div.cls{
display: inline;
margin: 5px;
}
</style>
<div class="container">
<div class="row justify-content-start">
<div class="cls">
<b>aaaaaaaaaaaaaaa</b>
</div>
<div class="cls">
111
</div>
</div>
<div class="row justify-content-start">
<div class="cls">
<b>bbb</b>
</div>
<div class="cls">
222
</div>
</div>
<div class="row justify-content-start">
<div class="cls">
<b>ccccc</b>
</div>
<div class="cls">
33333333333
</div>
</div>
<div class="row justify-content-start">
<div class="cls">
<b>dddddddddd</b>
</div>
<div class="cls">
4
</div>
</div>
</div>
Unfortunately, this approach did not work as expected:
https://i.sstatic.net/KxDFl.png
So, I decided to change my strategy. Why not utilize a flex-grid layout with rows to stack two divs: abcs and 123s?
<div class="row justify-content-start">
<div>
<div>
<b>aaaaaaaaaaaaaaa</b>
</div>
<div>
<b>bbb</b>
</div>
</div>
<div>
<div>
111
</div>
<div>
222
</div>
</div>
</div>
This new implementation worked successfully. https://i.sstatic.net/Qut7R.png
However, I find the current method to be quite lengthy and messy. Is there a more efficient way to achieve the same outcome?
Your assistance would be greatly appreciated. :-)