Я новичок в вебе, возникла такая проблема.
Нужно чтобы картинка была справа, а все остальные элементы слева. Чтобы все было на одном уровне по вертикали, но выходит только так
помогите пожалуйста исправить проблему.
.second-part {
height: 4.67%;
background-color: white;
padding: 20px 30px;
border: 15px dolid black;
font-weight: 100;
}
.subtitle-for-second-part {
display: flex;
}
.subtitle-for-second-part h2 {
text-transform: uppercase;
}
.describe-for-second-subtitle {
display: flex;
}
.describe-for-second-subtitle p {
font-size: 12px;
}
.with-button-second-part {
display: flex;
}
.button-second-part {
border: 1px solid black;
border-radius: 35px;
background-color: white;
}
.with-phone-picture {
display: flex;
justify-content: flex-end;
}
<div class="second-part">
<div class="subtitle-for-second-part">
<h2>this is bouncy</h2>
</div>
<div class="describe-for-second-subtitle">
<p>At vero eos et accusamus et iusto odio dignissimos ducimus qui <br> blanditiis praesentium voluptatum deleniti atque corrupti quos <br> dolores et quas molestias excepturi sint occaecati cupiditate non <br> provident, similique sunt in culpa qui officia
deserunt mollitia <br> animi, id est laborum et dolorum fuga. Et harum quidem rerum <br> facilis est et expedita distinctio. </p>
</div>
<div class="with-button-second-part">
<button class="button-second-part">Read more</button>
</div>
<div class="with-phone-picture">
<img src="res/images/phone-for-second-part.png" alt="phone">
</div>
</div>