There are 4 blocks. Each of them has an identical code, which is shown below.
How to arrange them according to the picture?
enter image description here

Screenshot

enter image description here

    2 answers 2

    In this way - flexbox

    codepen

    * { margin: 0; padding: 0; box-sizing: border-box; } .items { width: 90vw; height: 100vh; margin: auto; background: url(http://hotnupics.com/pics/1412/lindsay-lohan-stockings.jpg); background-size: cover; background-position: right center; display: flex; justify-content: space-between; } .item { width: 25vw; height: 100vh; display: flex; flex-direction: column; justify-content: center; } .itemes { width: 90%; min-height: 100px; background: rgba(255, 192, 203, 0.5); margin: 20px auto; padding: 20px; } 
     <div class="items"> <div class="item"> <div class="itemes"> <h4>Lorem, ipsum.</h4> <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Delectus, alias! </p> </div> <div class="itemes"> <h4>Lorem, ipsum.</h4> <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Delectus, alias! </p> </div> </div> <div class="item"> <div class="itemes"> <h4>Lorem, ipsum.</h4> <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Delectus, alias! </p> </div> <div class="itemes"> <h4>Lorem, ipsum.</h4> <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Delectus, alias! </p> </div> </div> </div>

    • Super code! I recommend - Antonio112009

    read here

    Divide your row into 4 col (you will figure it out yourself) and set the first and last text-align.