JSFiddle - React, Tailwind, and code Playground

HTML

<ul class="subMenu categoryMenu1">
  <a class="sub-heading">Category 2</a>
  <li><a href="" data-title="Price- ₹15/kg">Cabbage</a></li>
  <li><a href="" data-title="Price- ₹15/kg">Carrot</a></li>
  <li><a href="" data-title="Price- ₹15/kg">Reddish</a></li>
  <li><a href="" data-title="Price- ₹15/kg">Peas</a></li>
  <li><a href="" data-title="Price- ₹15/kg">French Beans</a></li>
  <li><a href="" data-title="Price- ₹15/kg">Jackfruit</a></li>
  <li><a href="" data-title="Price- ₹15/kg">Tori</a></li>
  <li><a href="" data-title="Price- ₹15/kg">Sweet corn</a></li>
  <li><a href="" data-title="Price- ₹15/kg">Broccoli</a></li>
  <li><a href="" data-title="Price- ₹15/kg">Cucumber</a></li>
  <li><a href="" data-title="Price- ₹15/kg">Sem</a></li>
  <li><a href="" data-title="Price- ₹15/kg">Capsicum (Green)</a></li>
</ul>

CSS

.subMenuHolder{
  display: none;
  position: absolute;
  top: 0px;
  left: 100%;
}

.subMenu{
  border: 1px #00f solid;
  margin-left: 20px;
  list-style: inside decimal;
  padding: 30px 30px;
  width: 500px;
  height: 300px;
  -webkit-columns: 2;
  -moz-columns: 2;
  columns: 2;
  -webkit-column-gap: 2em;
  -moz-column-gap: 2em;
  column-gap: 2em; 
}

.categoryMenu1{
  background: url(/theme/images/pictures/potato-onion1.png) no-repeat;
  background-size: 350px 200px;
  background-position: bottom right;
  background-color: #f2f9fd;
}

.subMenu li{
  border: 1px #f00 solid;
  padding: 5px 0px;
  text-transform: none;
  font-size: 16px;
  color: #757575;
  -webkit-column-break-inside: avoid;
  page-break-inside: avoid;
  break-inside: avoid;
}