Спасибо большое за консультацию, ниже мой код, Может кому будет полезно.
Мой html
<div class="info_div">
<div class="delivery knopka">
<span>Доставка</span>
<div class="hide_info">
<h3>Москва и Подмосковье</h3>
<ul>
<li><strong>Курьером:</strong> по Москве - 200 р, за МКАД (в пределах 40 км) - от 200 до 500 р. от сложности доставки. </li>
<li><strong>Самовывоз:</strong> Москва, м. Щелковская, ул. Алтайская 12 - бесплатно.</li>
</ul>
<h3>Другие регионы России</h3>
<p>Доставка в другие города России производиться компаниями:</p>
<ul class="hide_info_delivery">
<li><span class="sdek">СДЕК</span></li>
<li><span class="business_line">Деловые Линии</span></li>
<li><span class="post_russia">Почтой России</span></li>
</ul>
<p>Стоимость доставки товара согласно тарифов ТК.</p>
</div>
</div>
<div class="pay knopka">
<span>Оплата</span>
<div class="hide_info">
<h3>Наличными</h3>
<p>Вы можете расплатиться наличными при:</p>
<ul>
<li>Доставке курьером</li>
<li>Забирая товар со склада (самовывоз)</li>
<li>Заказав доставку с наложенным платежом (вся Россия)</li>
</ul>
<h3>Онлайн оплата</h3>
<ul>
<li>Сбербанк Онлайн</li>
</ul>
</div>
</div>
</div>
Стили css
.info_div {
display: flex;
justify-content: flex-start;
}
.knopka {
position: relative;
cursor: help;
padding: 15px 15px 15px 45px;
border-bottom: 1px solid #dcdcdc;
}
.knopka span{
font-size: 18px;
}
.delivery{
background: url(89735_3.png) no-repeat scroll 0 center;
}
.pay{
background: url(cb010d81724fbea1f551843c7bb762af.png) no-repeat scroll 5px center;
}
.hide_info {
width: 500px;
display: none;
right: 0;
top: 45px;
border: 1px solid #dcdcdc;
padding: 0 15px;
position: absolute;
background-color: #ffffff;
z-index: 1;
}
.hide_info_delivery li{
list-style: none;
margin-bottom: 20px;
}
.hide_info_delivery li span{
font-size: 16px;
padding-top: 5px;
padding-bottom: 5px;
}
.post_russia{
background: url(Russian_Post.png) no-repeat scroll 0 center;
padding-left: 125px;
}
.sdek{
background: url(cdek.png) no-repeat scroll 0 center;
padding-left: 125px;
}
.business_line{
background: url(dl_logo.png) no-repeat scroll 0 center;
padding-left: 125px;
}
.knopka:hover .hide_info {
display: block;
}
@media (max-width: 767px){
.info_div {
display: block;
}
.hide_info {
width: 100%;
}
}
