Bootstrap: How to wrap row and break into two rows if content is too long

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:

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.

I think this a CSS problem.

Here is a cheatsheet I always use when working with Bootstrap class=“d-flex flex-wrap” maybe what you are looking for if I could look at your source code I could better help.