Can someone help me create this CSS layout? The parent div has a max-width of 1500px, uses display flex, and has a gap of 18px. It contains two children with IDs #text and #news... the news child is designed to overlap and touch the right edge of any screen size.
https://i.sstatic.net/ZxNHp.png
html{
border:1px solid red;
}
html:after{
content:"HTML";
color:gray;
}
.main{
display:flex;
flex-flow:row;
max-width:350px;
color:black;
}
.main .child-1 {
flex: 1 1 40%;
border:1px solid #000
}
.main .child-2 {
flex: 1 1 100vw;
border:1px solid #000;
}
.main ul p {
display:block;
width 250px; // Whatever
}
ul{
list-style:none;
display:flex;
}<div class="main">
<p class="child-1">Some lorem Text</p>
<div class="child-2">
<ul>
<li><p>1</p></li>
<li><p>2</p></li>
<li><p>3</p></li>
<li><p>4</p></li>
</ul>
</div>
</div>