how to arrange elements next to each other?

Question

How can I arrange the elements as shown in the picture?

I really tried so that the elements are next to each other, I use display flex, I change width ".slider", but I can't do it. I know that somewhere there is a mistake, but I don't where.

.slider {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    background-color: red;
    height: 100vh;
    display: flex;
}

.slid {
    position: relative;
    width: 100%;
    height: 100vh;
}

.img-slid {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 35%;
    height: 50%;
    background-size: cover;
}

.engine {
    background-color:black;
}

.exhaust {
    background-color: grey;
}



.slid-text {
    position: absolute;
    top: 50%;
    left: 11%;
    transform: translateY(-50%);
    font-size: 8rem;
    text-transform: uppercase;
    color: #fff;
    font-family: 'Black Ops One', cursive;

}

.number-slaid {
    position: absolute;
    bottom: 8%;
    right: 8%;
    font-size: 2rem;
    color: #fff;
    font-family: 'Black Ops One', cursive;
}

.arrows-left {
    position: absolute;
    top: 50%;
    left: 5%;
    transform: translateY(-50%) rotate(45deg);
}

.arrows-right {
    position: absolute;
    top: 50%;
    right: 5%;
    transform: translateY(-50%) rotate(-135deg);
}

.arrow {
    width: 80px;
    height: 80px;
    border-left: 2px solid #000;
    border-bottom: 2px solid #000;
    cursor: pointer;
}

<main>
        <section class="slider">
            <div class="slid">
                <div class="engine img-slid"> </div>
                <p class="slid-text">Silniki</p>
                <p class="number-slaid">01</p>
            </div>
            <div class="slid ">
                <div class="exhaust img-slid"></div>
                <p class="slid-text">Wydechy</p>
                <p class="number-slaid">02</p>
            </div>


            <div class="arrows-slider">
                <div class="arrows-left arrow"></div>
                <div class="arrows-right arrow"></div>
            </div>

        </section>
    </main>

Link to Codepen: https://codepen.io/jarek-babiak/pen/GRQLvNV

Answer 1

The way I understand it, the issue should most probably be solved by making slid element width to 100vw instead of 100% because the parent element is a flexbox with two child elements.

.slid{
width:100vw;
}