How to create white space between words and keep design responsive - html

Question

I am trying to create a box with a list of descriptive characteristics to the left and corresponding values to the right. I want it to be responsive also. First I tried to create two Unordered lists and float one right and the other left but this does not work when the browser becomes narrower.
So now I have tried to use the method below where I just add many to put space between the characteristic on the left and its value on the right.
This works if you specify the screen size with media queries but I'm not sure how it will display for a user who has an extra large screen that I have not written a media query for.
How can I create this space between words?
.gallery {
height: max-content;
background: black;
border-radius: 10px;
border: solid 2px #f0c330;
overflow: hidden;
color: white;
flex: 0 1 48%;
margin-left: 1%;
margin-right: 1%;
<div class="gallery">
<h2>Statistics</h2>
<p class="pdesc"> Height 6ft <br/> Age
36</p>
</div>

Answer 1

Use flexbox for each row, and use justify-content: space-between to space out the items on the far ends of each box. Then you can adjust the width of the boxes accordingly, e.g. 30%:
.gallery {
background: #000;
border-radius: 10px;
border: solid 2px #f0c330;
color: #fff;
flex: 0 1 48%;
margin-left: 1%;
margin-right: 1%;
padding: 10px;
}
.gallery h2{
margin-top:0;
}
.pdesc{
display: flex;
justify-content: space-between;
width: 30%;
}
<div class="gallery">
<h2>Statistics</h2>
<div class="pdesc">
<span>Height</span>
<span>6ft</span>
</div>
<div class="pdesc">
<span>Age</span>
<span>36</span>
</div>
</div>

Answer 2

Ugh!
I'd do something like this:
<div class="gallery">
<h2>Statistics</h2>
<p class="pdesc"><span>Height</span><span>6ft</span></p>
<p class="pdesc"><span>Age</span><span>36</span></p>
</div>
<style>
.gallery {
height:max-content;
background: black;
border-radius: 10px;
border: solid 2px #f0c330;
overflow:hidden;
color: white;
flex: 0 1 48%;
margin-left: 1%;
margin-right:1%;
}
p {
width:100%;
display:flex;
justify-content:space-between;
}
</style>
No messing with variable at all.

Answer 3

You could use span tags for the text parts and apply display: flex; justify-content: space-between; to the p tags:
.gallery {
height: max-content;
background: black;
border-radius: 10px;
border: solid 2px #f0c330;
overflow: hidden;
color: white;
flex: 0 1 48%;
margin-left: 1%;
margin-right: 1%;
padding: 12px;
}
.pdesc {
display: flex;
justify-content: space-between;
}
<div class="gallery">
<h2>Statistics</h2>
<p class="pdesc"><span>Height</span><span>6ft</span></p>
<p class="pdesc"><span>Age</span><span>36</span></p>
</div>