JSFiddle - React, Tailwind, and code Playground
HTML
<div class="container">
<div class="column-list">
<div class="column-left">
<h1 class="column-left-title">
Мы - маленькая, но гордая дизайн-студия из Краснодара.
</h1>
<p>Исповедуем принципы минимализма и чистоты. Ставим математический расчет выше креатива. Работаем не покладая рук, как роботы.</p>
<h2 class="title-left-list">Выполняем заказы на разработку:</h2>
<ul class="column-left-list">
<li>Веб-сайтов любой сложности</li>
<li>Мобильных приложений для iOS и Android</li>
<li>Слайдшоу и видео для корпоративных презентаций</li>
</ul>
</div>
<!-- RIGHT COLUMN -->
<div class="column-right">
<a href="#"><img src="../nerd/img/logo2.png" alt="logo2"></a>
<div class="column-right-title">SINCE 2004</div>
<h2 class="title-right-list">Как мы работаем:</h2>
<ul class="column-right-list">
<li>С самоотдачей 146%</li>
<li>Соблюдая сроки на 100%</li>
<li>По предоплате 50%</li>
</ul>
</div>
</div>
</div>
CSS
.column-list {
width: 900px;
height: 475px;
padding: 50px 0 50px 0;
}
.column-left {
float: left;
width: 600px;
margin-right: 40px;
}
.column-left-title {
padding-right: 80px;
font: medium 36px/36px 'Roboto', sans-serif;
}
.column-left-title p {
font: 16px/22px 'Roboto light', sans-serif;
padding-bottom: 20px;
}
.title-left-list {
padding-top: 20px;
font: 16px/22px 'Roboto medium', sans-serif;
text-transform: uppercase;
}
.column-left-list {
padding: 0;
}
.column-left-list li {
list-style: none;
}
.column-left-list li:before {
content: '\2015';
font-size: 25px;
height: 2px;
width: 10px;
color: red;
padding-right: 10px;
}
/* COLUMN LEFT END */
/* RIGHT COLUMN */
.column-right {
float: right;
width: 260px;
}
.column-right a {
padding-left: 40px;
}
.column-right-title {
position: relative;
display: inline;
padding-top: 15px;
font: 16px/22px 'Roboto medium', sans-serif;
text-transform: uppercase;
text-align: center;
}
.column-right-title:after {
content: '';
display: block;
border: 1px solid #eee;
}
.title-right-list {
padding-top: 50px;
font: 16px/22px 'Roboto medium', sans-serif;
text-transform: uppercase;
}
.column-right-list {
padding: 0;
}
.column-right-list li {
list-style: none;
}
.column-right-list li:before {
content: '\2015';
font-size: 25px;
height: 2px;
width: 10px;
color: red;
padding-right: 10px;
}