bootstrap-4 column display break with javascript style.display = "block"

Question

my div displaying properly in 1 row at the beginning.

However, once the user change my select option to b then back to a. The display breaks. The two text "my left side text" and "my right text" is display in 2 line 1 below the other instead of 1 (how it originally was before they switch option back and forth). How can I fix this thanks in advance

<select id = 'test'>
<option>a</option>
<option>b</option>
</select>
<div id = 'row_contanier1' class = 'form-group row'>
<p class = 'col-sm-2 col-form-label'>my left side text </p>
<p class = 'col-sm=10'> my right text </p>
</div>

javascript/jquery below

$(document).ready(function){
    $(#test).change(function(){
        var index = document.getElementById('test').selectedIndex;
        
        if(index ==1){
            document.getElementById('row_contanier1').style.display = "none";
        }
        else{
            document.getElementById('row_contanier1').style.display = "block";
        }
    });
});

Edit: sorry jquery code got cutoff before

Answer 1

.row have display flex (in bootstrap)

change your code document.getElementById('row_contanier1').style.display = "flex";

or use css classes

if(index ==1){
  document.getElementById('row_contanier1').classList.add('d-none');
}
else{
  document.getElementById('row_contanier1').classList.remove('d-none');
}

Answer 2

document.getElementById('row_contanier1').style.display = "flex";

May work for you.

<p class = 'col-sm=10'> my right text </p>

should be <p class = 'col-sm-10'> my right text </p> try this..