I'm making li/lu with JS:
(function(){
var ul = document.createElement('ul');
ul.setAttribute('id','proList');
var t, tt;
productList=["product1", "product2", "product3", "product4"];
document.getElementById('renderList').appendChild(ul);
productList.forEach(renderProductList);
function renderProductList(element, index, arr) {
var li = document.createElement('li');
li.setAttribute('class','item');
ul.appendChild(li);
t = document.createTextNode(element);
li.innerHTML=li.innerHTML + element;
}
})();
ul#proList{float:right;margin-top: 50px; }
li.item{list-style:none; padding:5px; border-radius: 1px;
border: 1px solid #005eff;}
<div id="renderList" style="float:right;"><b style="float:right;">Product catalog:</b></div>