I am struggling to display a list of ingredients in three columns, as they are not aligning correctly. Can someone offer a solution? It may seem complex, but I am at a loss.
function display(){
var lght = jsn[0].ingredient.length;
var old_val = new Array(lght);
var ell = "";
var ul = document.getElementById("comp_tag");
for(let a=0; a < lght; a++){
var li = document.createElement('li');
var divr = document.createElement('div');
li.setAttribute("id","lineid_"+a);
divr.setAttribute("class","row align-middle");
ul.appendChild(li);
li.appendChild(divr);
var col_one = document.createElement('div');
col_one.setAttribute("class","col-6 text-left");
col_one.setAttribute("id","col1"+a);
divr.appendChild(col_one);
col_one.appendChild(document.createTextNode("value 1"));
var col_two = document.createElement('div');
col_two.setAttribute("class","col-3 text-right");
col_two.setAttribute("id","col2"+a);
divr.appendChild(col_two);
col_two.appendChild(document.createTextNode("value 2"));
var col_three = document.createElement('div');
col_three.setAttribute("class","col-3 text-left");
col_three.setAttribute("id","col3"+a);
divr.appendChild(col_three);
var pb = init_workspace(jsn[0].ingredient[a].type);
var sel = document.createElement("select");
sel.setAttribute("class","custom-select");
sel.setAttribute("id","c_select"+a);
col_three.appendChild(sel);
for(var t=0; t<pb.length; t++){
var optn = document.createElement("option");
if(jsn[0].ingredient[a].unit == pb[t].name){
optn.setAttribute("selected","")
};
optn.setAttribute("value",pb[t].name);
sel.appendChild(optn);
optn.appendChild(document.createTextNode(pb[t].name));
}
My HTML section looks like this:
<div class="col-md text-right" id="divid">
<p class="text-uppercase"><b>ingredients</b></p>
<ul id="comp_tag">
</ul>
</div>