How to align two elements on the same line from PHP

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>