JSFiddle - React, Tailwind, and code Playground

HTML

<div id="somediv">

</div>
<style>
.option{
  width: 100%;
height: 101px;
}
.options{
  border-style: solid;
  width: 70px;
  float: left;
  margin: 3px;
  padding:3px;
}
</style>

JavaScript

var html ='';
var option = ['meal', 'drink'];
var option_type = ['big', 'medium', 'small', 'big', 'medium'];

for (var i in option){
html+='<div class="option"><h1>'+ option[i] + '</h1>';

    for ( var j in option_type){
        html += '<p class="options">'+option_type[j]+'</p>';
    }    
    html += '</div >';
}

console.log(html);

var div = document.getElementById("somediv");
div.innerHTML = html;