I've been attempting to replicate this specific block layout, but I can't seem to get it right according to the design. Can anyone provide guidance on how to achieve it? Here is the desired block: https://i.stack.imgur.com/ud0HM.jpg
Here's the code I've tried:
.section-1 {
background: green;
height: 100px;
}
.section-2 {
display: flex;
align-items: center;
}
.col-img {
margin-top: -40px;
position: relative;
}
.col-img:after {
top: 40px;
position: absolute;
right: 100%;
width: 10px;
background: purple;
content: '';
bottom: 0;
}
.col-img img{
width: 100%;
vertical-align: top;
}
.section-2 .col {
width: 50%;
}<div class="section-1">
</div>
<div class="section-2">
<div class="col">
<p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Harum voluptatem beatae quia facilis nobis, dolore quidem nostrum! Blanditiis eveniet dolor a, laudantium repudiandae rem commodi ea adipisci. Eius, obcaecati rerum.</p>
</div>
<div class="col col-img">
<img src="http://via.placeholder.com/650x650" alt="">
</div>
</div>