How to display the HTML output in rows

Where I am using the div class, there is a line-break after every if statement and the rows are not in alignment.

How can I correctly align the php output, so both rows is horizontal aligned.

function display_selected_variation_custom_field_js(){
        ?>
        <script type="text/javascript">
        (function($){
            var a = '.custom_variation-text-field', b = $(a).html();
    
            $('form.cart').on('show_variation', function(event, data) {
                outputHtml = '';
    
                if( data.model ) {
                    outputHtml += '<div align="left"> <span><strong><?php _e("Model"); ?><strong>: '+data.model+'<span></div>';
                }
                if( data.wattage ) {
                    outputHtml += '<div align="center"><span><strong><?php _e("Wattage"); ?><strong>: '+data.wattage+'<span></div>';
                }
                if( data.lumen ) {
                    outputHtml += '<div align="right"><span><strong><?php _e("Lumen"); ?><strong>: '+data.lumen+'<span></div>';
                }
                if( data.material ) {
                    outputHtml += '<div align="left"><span><strong><?php _e("Material"); ?><strong>: '+data.material+'<span></div>';
                }
                if( data.dimension ) {
                    outputHtml += '<div align="center"><span><strong><?php _e("Dimension"); ?><strong>: '+data.dimension+'<span></div>';
                }
                if( data.year ) {
                    outputHtml += '<div align="right"><span><strong><?php _e("Year"); ?><strong>: '+data.year+'<span></div>';
                }
                if( outputHtml ) {
                    $(a).html(outputHtml);
                }
            }).on('hide_variation', function(event) {
                $(a).html(b);
            });
        })(jQuery);
        </script>

Current Output:

Expected Output:

Answer

You can give some outer divs to your datas because your code is display everthing in separate line so this will help to differentiate between them .

Demo Code :

var a = '.custom_variation-text-field';
//suppose data look like this ..
var data = {
  "model": 13,
  "lumen": "somehtnf",
  "material": 122,
  "dimension": 12,
  "year": 1333,
  "wattage": 33
}

var outputHtml = '';
//give some outer div to differntiate them
var outer = "<div class='outer'>"
if (data.model) {
  outer += '<div align="left"><span><strong>Model</strong>: ' + data.model + '</span></div>';
}
if (data.wattage) {
  outer += '<div align="center"><span><strong>Wattage</strong>: ' + data.wattage + '</span></div>';
}
if (data.lumen) {
  outer += '<div align="right" ><span><strong>Lumen</strong>: ' + data.lumen + '</span></div>';
}
outer += outputHtml + "</div><div class='outer'>" //close it 
if (data.material) {
  outer += '<div align="left"><span><strong>Material</strong>: ' + data.material + '<span></div>';
}
if (data.dimension) {
  outer += '<div align="center" ><span><strong>Dimension</strong>: ' + data.dimension + '</span></div>';
}
if (data.year) {
  outer += '<div align="right" ><span><strong>Year</strong>: ' + data.year + '</span></div>';
}
outer += "</div>"
if (outer) {
  $(a).html(outer);
}

.outer>* {
  display: inline-block;
  width: 150px;
  height: 30px;
  border-bottom: 2px solid;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="custom_variation-text-field">

</div>