Center align div content if font size change - html

Question

My Code is like below.
.wpwi_main {
border: 1px solid aliceblue;
border-radius: 5px;
font-size: 9px;
}
.wpwi_top {
text-align: center;
}
.wpwi_outer {
text-align: center;
margin: auto;
padding-bottom: 20px;
width: 100%;
}
.wpwi_inner {
display: table;
width: 40%;
margin: auto;
}
.wpwi_row {
display: table-row;
width: 50%;
}
.wpwi_row > div {
display: table-cell;
width: 20%;
}
<div class="wpwi_main">
<div class="wpwi_top">Top</div>
<div class="wpwi_outer">
<div>Outer</div>
</div>
<div class="wpwi_inner">
<div class="wpwi_row">
<div>Time</div>
<div>8:02 PM</div>
</div>
<div class="wpwi_row">
<div>Date</div>
<div>13 Aug 2022</div>
</div>
<div class="wpwi_row">
<div>Pressure</div>
<div>999 hPa</div>
</div>
<div class="wpwi_row">
<div>Visibility</div>
<div>10000 Meter</div>
</div>
<div class="wpwi_row">
<div>Cloudiness</div>
<div>98%</div>
</div>
<div class="wpwi_row">
<div>Sunrise</div>
<div>5:37 AM</div>
</div>
<div class="wpwi_row">
<div>Sunset</div>
<div>6:39 PM</div>
</div>
</div>
</div>
I would like to keep two columns as close as possible without line break and center aligned when font size increase or decrease. I would like to keep like this image when font size is 28px https://i.stack.imgur.com/lYOzI.png and I would like to keep like this image when font size is 9px https://i.stack.imgur.com/89Jc3.png

Answer 1

You can try to unset width: 40% on .wpwi_inner and increase the width of .wpwi_row > div from 20% to 60%.
.wpwi_main {
border: 1px solid aliceblue;
border-radius: 5px;
font-size: 9px;
}
.wpwi_top {
text-align: center;
}
.wpwi_outer {
text-align: center;
margin: auto;
padding-bottom: 20px;
width: 100%;
}
.wpwi_inner {
display: table;
/* width: 40%; */ /* Removed this */
margin: auto;
}
.wpwi_row {
display: table-row;
width: 50%;
}
.wpwi_row > div {
display: table-cell;
width: 60%; /*Increase this width to 60%*/
}
<div class="wpwi_main">
<div class="wpwi_top">Top</div>
<div class="wpwi_outer">
<div>Outer</div>
</div>
<div class="wpwi_inner">
<div class="wpwi_row">
<div>Time</div>
<div>8:02 PM</div>
</div>
<div class="wpwi_row">
<div>Date</div>
<div>13 Aug 2022</div>
</div>
<div class="wpwi_row">
<div>Pressure</div>
<div>999 hPa</div>
</div>
<div class="wpwi_row">
<div>Visibility</div>
<div>10000 Meter</div>
</div>
<div class="wpwi_row">
<div>Cloudiness</div>
<div>98%</div>
</div>
<div class="wpwi_row">
<div>Sunrise</div>
<div>5:37 AM</div>
</div>
<div class="wpwi_row">
<div>Sunset</div>
<div>6:39 PM</div>
</div>
</div>
</div>