background: linear-gradient(to right, yellow 50%, green 50%);<div class="wrapper">
<div class="inner">
<div class="col c1">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Blanditiis, nemo!</div>
<div class="col c2">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Blanditiis, nemo!</div>
</div>
<div class="inner">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Obcaecati saepe inventore ut, doloremque dolor consequatur, nesciunt voluptates quod nostrum accusamus hic minima quasi id labore error aliquid omnis perspiciatis. Et sint maiores accusamus rerum, quae enim asperiores a sed quasi repellendus, corrupti repellat eius quaerat quia cupiditate assumenda vel optio, nisi. Modi temporibus, eum aliquam optio quaerat doloremque expedita deleniti.
</div>
</div>* {
box-sizing: border-box
}
html,
body {
height: 100%;
margin: 0;
}
.wrapper {
overflow-x: hidden;
}
.inner {
display: flex;
width: 80%;
margin: auto;
}
.col {
position: relative;
width: 50%;
padding: 20px 0;
}
.c1::after {
content: "";
position: absolute;
top: 0;
right: 0;
width: 50vw;
height: 100%;
background: yellow;
z-index: -1;
}
.c2::after {
content: "";
position: absolute;
top: 0;
left: 0;
width: 50vw;
height: 100%;
background: green;
z-index: -1;
}<div class="icons">
<a href="" class="icon icon1">
<svg aria-hidden="true" focusable="false" data-prefix="fab" data-icon="twitter" class="svg-inline--fa fa-twitter fa-w-16" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" width="30" height="30"><path fill="currentColor" d="M459.37 151.716c.325 4.548.325 9.097.325 13.645 0 138.72-105.583 298.558-298.558 298.558-59.452 0-114.68-17.219-161.137-47.106 8.447.974 16.568 1.299 25.34 1.299 49.055 0 94.213-16.568 130.274-44.832-46.132-.975-84.792-31.188-98.112-72.772 6.498.974 12.995 1.624 19.818 1.624 9.421 0 18.843-1.3 27.614-3.573-48.081-9.747-84.143-51.98-84.143-102.985v-1.299c13.969 7.797 30.214 12.67 47.431 13.319-28.264-18.843-46.781-51.005-46.781-87.391 0-19.492 5.197-37.36 14.294-52.954 51.655 63.675 129.3 105.258 216.365 109.807-1.624-7.797-2.599-15.918-2.599-24.04 0-57.828 46.782-104.934 104.934-104.934 30.213 0 57.502 12.67 76.67 33.137 23.715-4.548 46.456-13.32 66.599-25.34-7.798 24.366-24.366 44.833-46.132 57.827 21.117-2.273 41.584-8.122 60.426-16.243-14.292 20.791-32.161 39.308-52.628 54.253z"></path></svg>
</a>
<a href="" class="icon icon2">
</a>
</div>.icons {
display: flex;
}
.icon{
display: flex;
justify-content: center;
align-items: center;
width: 50px;
height: 50px;
background: #eee;
border-radius: 50%;
color: red;
}
.icon1 {
}
.icon2 {
background: #eee url("https://helinet.com/assets/images/social-twit.png") no-repeat center / 30px 30px;
}@media, когда блоки начнут наползать друг на друга.
<svg height="24" viewBox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg">
<path d="M11.9826 4C9.93339 4 7.90628 4.80442 6.34377 6.36692C3.21874 9.49203 3.21874 14.5544 6.34377 17.6794C9.46879 20.8044 14.5312 20.8044 17.6562 17.6794C20.7813 14.5544 20.7813 9.49203 17.6562 6.36692C16.0937 4.80442 14.0318 4 11.9826 4V4ZM11.9826 5.11384C13.7441 5.11384 15.5053 5.78232 16.8557 7.13269C19.5563 9.83331 19.5563 14.1782 16.8557 16.8788C14.155 19.5795 9.81018 19.5795 7.10953 16.8788C4.40889 14.1782 4.40889 9.83331 7.10953 7.13269C8.45986 5.78232 10.2211 5.11384 11.9826 5.11384V5.11384ZM9.37203 8.03768L8.04934 9.39518L10.6947 12.0057L8.04934 14.6511L9.37203 15.9738L12.0174 13.3632L14.628 15.939L15.9507 14.6163L13.3401 12.0057L15.9507 9.39518L14.628 8.07249L12.0174 10.6831L9.37203 8.03768Z" fill="black"/>
</svg>top: 0;
right: 0;top: 50px;
right: 50px;