How to align two elements on the same line from PHP - html

Question

Screenshots:
Inspect element shows:
The "7 in stock" i want to align with the "10" bellow
I would like to align two $elements to display on the same line.
<span class="max">
<?php echo $tickets_sold, $max_tickets; ?>
</span>
When the $tickets_sold is not included, the $max_tickets goes on the top. But when it's included, it immediately goes on the next line.
I've tried many different options as &&, and, but they never appear on the same line. I am sure the solution is easy, but I am a beginner.
$max_tickets = $product->get_max_tickets();
$tickets_sold = wc_get_stock_html( $product );
PHP code
<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>
<span class="max"> <?php echo $tickets_sold, $max_tickets?></div></span>
</div>
CSS file
.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;
vertical-align: middle;
}

Answer 1

Just tweak your HTML a bit and all should work as you desire:
<style>
.flex-parent{display:flex;}
.flex-child{flex-basis:content;margin-right:10px;}
</style>
<div class="max flex-parent">
<div class="flex-child"><?php echo $tickets_sold;?></div>
<div class="flex-child"><?php echo $max_tickets;?></div>
</div>
<style>
.flex-parent{display:flex;}
.flex-child{flex-basis:content;margin-right:10px;}
</style>
<div class="max flex-parent">
<div class="flex-child">tickets_sold</div>
<div class="flex-child">max_tickets</div>
</div>
Or, you could also just use display:inline:
<style>
.inline-block{display:inline-block;margin-right:10px;}
</style>
<div class="max">
<div class="inline-block"><?php echo $tickets_sold;?></div>
<div class="inline-block"><?php echo $max_tickets;?></div>
</div>
<style>
.inline-block{display:inline-block;margin-right:10px;}
</style>
<div class="max">
<div class="inline-block">tickets_sold</div>
<div class="inline-block">max_tickets</div>
</div>
Update:
Note the change to the first example code - I neglected to add the flex-parent class (a className I invented, not a convention) to the .max div.
To center the items in the parent, add justify-content:center; to the parent:
<style>
.flex-parent{display:flex;}
.flex-child{flex-basis:content;margin-right:10px;justify-content:center;}
</style>
<div class="max flex-parent">
<div class="flex-child"><?php echo $tickets_sold;?></div>
<div class="flex-child"><?php echo $max_tickets;?></div>
</div>
Using the display:inline-block method:
<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>
<style>
.inline-parent{text-align:center;}
.inline-block{display:inline-block;margin-right:10px;}
</style>
<div class="max inline-parent">
<div class="inline-block">tickets_sold</div>
<div class="inline-block">max_tickets</div>
</div>