JSFiddle - React, Tailwind, and code Playground

HTML

<div class="smallblock-b blueblock"><a href="#">text</a></div>
    <label>
<input type="checkbox"></input>
    <div class="smallblock-b blueblock"><p>text text text text text text text text text text text text text text text text text text text text text text text</p><p>text text text text text text text text text text text text text text text text text text text text text text text</p></div>
</label>

CSS

.smallblock-b {
width: 220px;
height: 100px;
margin: 10px;
float: left;
}

.blueblock {background:rgb(87, 191, 234);}


div{
    display:inline-block;
    width:50px;
    height:50px;
    background:#ccc;
    border-radius:5px;
    transition:.5s;
        overflow:hidden;
}
input{
    display:none;
}
input:checked ~ div{
    width:220px;
    height:220px;
    background:#555;
}