How to change place of elements from same line - html

Question

I have a block from 3 elements - minimum value, stock of a product, maximum value.
All i need to do is to find a way to align the stock of the product in the middle between both values.
My guess is that the problem should be somewhere on these lines:
<style>
.inline-parent{text-align:center;}
.inline-block{display:inline-block;margin-right:10px;}
</style>
<div class="max inline-parent">
<div class="inline-block"><?php echo $tickets_sold;?></div>
<div class="inline-block"><?php echo $max_tickets;?></div>
</div>
My browser renders the file like this:(screenshot)
Inspect of the element shows this: (screenshot)
Using Flex wrong
even worst
CSS -
.wcl-progress-meter meter::-webkit-meter-suboptimum-value {
box-shadow: 0 5px 5px -5px #999 inset;
background: #cb132b;
display:inline-block;
}
.wcl-progress-meter .zero {
display: inline-block;
position: absolute;
top: -100%;
}
.wcl-progress-meter .min {
display: inline-block;
position: absolute;
top: -100%;
}
.wcl-progress-meter .max {
display: inline-block;
position: absolute;
top: -100%;
right: 0;
}
PHP- file where i tried to edit the code
$max_tickets = $product->get_max_tickets();
$tickets_sold = wc_get_stock_html( $product );
<div class="wcl-progress-meter <?php if($product->is_max_tickets_met()) echo 'full' ?>">
<progress max="<?php echo $max_tickets ?>" value="<?php echo $lottery_participants_count ?>" low="<?php echo $min_tickets ?>"></progress></br>
<span class="zero">0</span>
<style>
.inline-parent{text-align:center;}
.inline-block{display:inline-block;margin-right:10px;}
</style>
<div class="max inline-parent">
<div class="inline-block"><?php echo $tickets_sold;?></div>
<div class="inline-block"><?php echo $max_tickets;?></div>
</div>

Answer 1

CSS flexbox will help you achieve this easily.
Check this fiddle
Read about CSS flex
.value-container{
width: 600px;
display: flex;
justify-content: space-between;
}
UPDATE:
Make sure you take out the span from wcl-progress-meter div and put it inside max div
You can also get rid of inline-block class. Refer below Code.
<span class="zero">0</span>
PHP:
<div class="max">
<span class="zero">0</span>
<div><?php echo $tickets_sold;?></div>
<div><?php echo $max_tickets;?></div>
</div>
CSS:
.max{
display: flex;
justify-content: space-between;
}
UPDATE : 2 (Below CSS should work if you remove the absolute position)
.wcl-progress-meter meter::-webkit-meter-suboptimum-value {
box-shadow: 0 5px 5px -5px #999 inset;
background: #cb132b;
display:inline-block;
}
.wcl-progress-meter .zero {
/* try removing the CSS */
}
.wcl-progress-meter .min {
/* try removing the CSS */
}
.wcl-progress-meter .max {
display: flex;
justify-content: space-between;
}