JSFiddle - React, Tailwind, and code Playground

by Ed Bulikyan

HTML

<div class="setka">
	<div class="setka__group">
		<div class="setka__item setka__item--pink setka__item--wide">
			Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptatibus magnam nesciunt aliquam, eveniet, sed neque omnis debitis laborum, consequuntur ducimus facere placeat doloremque ipsum minima, obcaecati consequatur sequi harum iusto?
		</div>
		
		<div class="setka__item setka__item--green setka__item--third">
			Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptatibus magnam nesciunt aliquam, eveniet, sed neque omnis debitis laborum, consequuntur ducimus facere placeat doloremque ipsum minima, obcaecati consequatur sequi harum iusto?
		</div>
		
		<div class="setka__item setka__item--blue setka__item--double">
			<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptatibus magnam nesciunt aliquam, eveniet, sed neque omnis debitis laborum, consequuntur ducimus facere placeat doloremque ipsum minima, obcaecati consequatur sequi harum iusto?</p>
			<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptatibus magnam nesciunt aliquam, eveniet, sed neque omnis debitis laborum, consequuntur ducimus facere placeat doloremque ipsum minima, obcaecati consequatur sequi harum iusto?</p>
		</div>

	</div>

	<div class="setka__item setka__item--orange setka__item--third">
			<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptatibus magnam nesciunt aliquam, eveniet, sed neque omnis debitis laborum, consequuntur ducimus facere placeat doloremque ipsum minima, obcaecati consequatur sequi harum iusto?</p>
			<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptatibus magnam nesciunt aliquam, eveniet, sed neque omnis debitis laborum, consequuntur ducimus facere placeat doloremque ipsum minima, obcaecati consequatur sequi harum iusto?</p>
			<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptatibus magnam nesciunt aliquam, eveniet, sed neque omnis debitis laborum, consequuntur...

SCSS

.setka {
	border: 1px solid lime;
	
	&,
	&__group {
		display: flex;
		flex-flow: row wrap;
		align-items: flex-start;
		justify-content: space-between;
	}

	&__group {
		width: calc(66.666666667% - 10px);	
	}

	&__item {
		height: auto;
		padding: 20px;
		margin-bottom: 20px;
		box-sizing: border-box;
		
		&--wide {
			width: 100%;
		}
		
		&--third {
			width: calc(33.333333333% - 10px);
		}
		
		&--double {
			width: calc(66.666666667% - 10px);
		}

		&--pink {
			background-color: #E362E4;
		}
		
		&--green {
			background-color: #39BD3B;
		}
		
		&--blue {
			background-color: #29B3FC;
		}
		
		&--orange {
			background-color: #FC6D32;
		}
	}
}