Как сделать картинку и текст в линию?
Источник: Stack Overflow на русском
это вырезка из моего кода
ul{list-style-type:none;margin-bottom:0;}
.new__list{display:flex;padding:80px 0 40px;flex-wrap:wrap;justify-content:space-between;}
.new__li{display:flex;width:100%;justify-content:space-between;}
.new__li:not(:last-child){margin:0 0 30px;}
.new__li:nth-child(2n) .new__item:first-child{order:2;}
.new__li:nth-child(2n) .new__item:last-child{order:1;}
.new__item{flex:0 0 calc(50% - 15px);display:flex;justify-content:space-between;flex-direction:column;}
.new__item-block p{margin:0;font-family:'Montserrat',sans-serif;font-weight:400;font-size:22px;line-height:27px;color:#3C3C48;}
.new__item-block{height:100%;display:flex;flex-direction:column;justify-content:flex-start;}
.new__item-block img{width:100%;height:100%;min-height:570px;object-fit:cover;object-position:center;border-radius:20px;background:#ccc;}
.new__item-block h3{margin:0 0 40px;font-weight:700;font-size:52px;line-height:120%;color:#3C3C48;}
.new__item-head{margin:0 0 40px;font-weight:700;font-size:40px;line-height:110%;color:#3C3C48;}
.new__item-button-new{font-weight:700;font-size:20px;line-height:140%;color:#5BC3CF;background:transparent;}
.new__item-button-new span{display:inline-block;margin:0 0 0 12px;transition:margin 0.3s;background:url('') no-repeat center center transparent;width:26px;height:12px;background-size:26px 12px;}
.new__item-button-new:hover span{margin:0 0 0 24px;}
@media (max-width:1600px){
.new__list{padding:60px 0 30px;}
.new__item-block img{min-height:356px;}
.new__item-block p{font-size:20px;line-height:24px;}
.new__item{flex:0 0 calc(50% - 11px);}
.new__li:not(:last-child){margin:0 0 22px;}
.new__item-block h3{margin:0 0 20px;font-size:32px;line-height:120%;}
}
@media (max-width:767px){
.new__list{flex-direction:column;}
.new__item-block img{min-height:285px;border-radius:0;}
.new__item-block p{margin:0 0 20px;font-size:16px;line-height:20px;}
.new__list{padding:40px 0 20px;}
.new__item-block h3{margin:0 0 20px;font-size:24px;line-height:120%;}
.new__item-button-new{padding:0 20px;margin:0 0 30px;}
.new__item-head{padding:0 20px;}
.new__item-block p{padding:0 20px;}
.new__item-block h3{padding:0 20px;}
}
@media (max-width:576px){
.new__li{flex-direction:column;}
.new__li:nth-child(2n) .new__item:first-child{order:1;}
.new__li:nth-child(2n) .new__item:last-child{order:2;}
}
<ul class="new__list">
<li class="new__li">
<div class="new__item">
<div class="new__item-block">
<h3 class="new__item-head">Заоголовок</h3>
<p>Текст</p>
</div>
<a href=""><button class="new__item-button-new">Подробнее<span></span></button></a>
</div>
<div class="new__item">
<div class="new__item-block">
<img class="" src="img/specstyle/specstyle_4.jpg" alt="">
</div>
</div>
</li>
<li class="new__li">
<div class="new__item">
<div class="new__item-block">
<h3 class="new__item-head">Заголовок</h3>
<p>Текст</p>
</div>
<a href=""><button class="new__item-button-new">Подробнее<span></span></button></a>
</div>
<div class="new__item">
<div class="new__item-block">
<img class="" src="img/specstyle/specstyle_5.jpg" alt="">
</div>
</div>
</li>
<li class="new__li">
<div class="new__item">
<div class="new__item-block">
<h3 class="new__item-head">Заголовок</h3>
<p>Текст</p>
</div>
<a href=""><button class="new__item-button-new">Подробнее<span></span></button></a>
</div>
<div class="new__item">
<div class="new__item-block">
<img class="" src="img/specstyle/specstyle_6.jpg" alt="">
</div>
</div>
</li>
</ul>