JSFiddle - React, Tailwind, and code Playground

by Dmitriy Shvanyk

HTML

<div class="parent">
    <div class="block">1</div>
    <div class="block-images">
        <img src="https://via.placeholder.com/250x150?text=3" alt="">
        <img src="https://via.placeholder.com/300x130?text=4" alt="">
        <img src="https://via.placeholder.com/250x150?text=5" alt="">
    </div>
    <div class="block block-2">2</div>
</div>

CSS

* {
    box-sizing: border-box;
}

.parent {
    position: relative;
    padding: 10px;
    overflow-x: hidden;
}

.block {
    height: 250px;
    line-height: 250px;
    text-align: center;
    border: 1px solid #f00;
    margin-bottom: 10px;
}

.block-2 {
    border-color: #00f;
}

.block-images {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 100%;
    transform: translate(-50%, -50%);
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.block-images>img {
    max-width: 100%;
    width: 33.3333%;
}

.block-images>img:nth-of-type(2) {
    width: calc(33.3333% + 60px);
}

.block-images>img:first-of-type {
    margin-left: -30px;
}

.block-images>img:last-of-type {
    margin-right: -30px;
}