JSFiddle - React, Tailwind, and code Playground

by bezdna

HTML

<div class="block">
    <div class="news">
        <div> <h1>тут только одна новость</h1></div>
    </div>
    <div class="news">
        <div><h1>а тут две и более новости</h1></div>
        <div><h1>а тут две и более новости</h1></div>
        <div><h1>а тут две и более новости</h1></div>
        <div><h1>а тут две и более новости</h1></div>
    </div>
    <div class="news">
        <div><h1>а тут две и более новости</h1></div>
        <div><h1>а тут две и более новости</h1></div>
        <div><h1>а тут две и более новости</h1></div>
        <div><h1>а тут две и более новости</h1></div>
        <div><h1>а тут две и более новости,
последняя на всю строчку                
            </h1></div>
    </div>
</div>

CSS

.block {
        width: 70%;
        padding: 20px;
        margin: auto;

    }
    h1 {
        text-align:center;
    }
    .news {
     border: 10px solid #000;
     overflow: hidden;
     height: 1%;
     margin: 0 0 20px;
    }
    .news div {
        width: 100%;
        border: 2px solid red;
        box-sizing: border-box;
    }
    .news div {
        width: 100%;
        border: 5px solid red;
        float: left;
    }
    .news div + div {
        width: 50%;        
    }
    .news div + div:last-child {
        float: left;
        width: 50%;
    }
    .news div:first-child {
        width: 50%;
        float: left;
        border: 5px solid blue
    }
    .news div:last-child {
        width: 100%;
        border: 5px solid green;
}
.news div:nth-child(2n+1):last-child {
        width: 100%;
        content: "last"
    }