So I have a page where I display data with a bunch of text labels and values.
Some labels are really long (up to two or three lines). Most labels however are a word or two followed by the value.
I want to use bootstrap 4’s flex properties to arrange the divs so that if I have a short label I want it to be like this:
Each label and each value is in its own div. So you have a parent div containing two divs, one for label and the other for value.
First Name: John
DOB: 09/09/1965
Favorite childhood show:
Tom and Jerry
What is your favorite flavor of ice cream which you eat while riding a pony over the Bermuda triangle:
Rainbow
As you can see, the first two labels, the values are both aligned even though the labels are varying in width. The next two labels are longer and the values won’t be able to line up with the first two. So it should break and start on the next line.
If I had col-4 to the label divs, then the short labels will look fine but the longer ones will be crunched up.