JSFiddle - React, Tailwind, and code Playground

by oilvier

HTML

<div class="foobar">
	<div class="foo">
		<div class="bar">
			<div class="baz">Coucou</div>
		</div>
		<div class="bazbar">
			Coucou
		</div>
	</div>
</div>

SCSS

.foobar {display:flex; flex-direction:column; height:100vh; max-height:800px; background:tomato;}
.foo {flex:1 1 100%; display:flex; flex-direction:column; justify-content:flex-end; width:100%; max-width:500px; background:blue;}
	.bar {position: relative; flex:1 1 0%; display:flex; flex-direction:column; justify-content:center; text-align: right;
		&:before {content:""; display: block; padding-bottom:percentage(200px/500px); width:100%; height:0; background-color:violet;}
	}
		.baz {position: absolute; top:50%; right:0; transform:translateY(-50%);}