JSFiddle - React, Tailwind, and code Playground

HTML

<menu class="main-menu">
<li><a href="#">Пункт 1</a>
<div class="sub-main-menu-block">
<ul class="sub-main-menu -left">
<li><a href="#">Подпункт 2</a></li>
<li><a href="#">Подпункт 3</a></li>
</ul>
<div class="menu-preview -right">
<p>многослойные структуры, различные нанообъекты (включая нанотрубки), кластеры, биологические объекты и др.</p>
</div>
</div>
</li>
<li><a href="#">Пункт 2</a></li>
<li><a href="#">Пункт 3</a></li>
<li><a href="#">Пункт 4</a></li>
<li><a href="#">Пункт 5</a></li>
</menu>

CSS

.-left{
float:left;
}
.-right{
float:right;
}
.main-menu{
list-style:none;
width:80%;
}
.main-menu>li{
display:inline;
position:relative;/*убираю*/
}
.sub-main-menu-block{
position:absolute;
top:40px;
left:10px;
border:1px solid #ccc;
    background:#696;
}
.sub-main-menu{
list-style:none;
text-align:left;
vertical-align:top;
}
.menu-preview{
width:200px;
vertical-align:middle;
padding:12px 10px;
}