JSFiddle - React, Tailwind, and code Playground

HTML

<div class="wrapper">
    <div class="test1"></div>
    <div class="test2">
        <div class="test3"></div>
    </div>
</div>

CSS

.wrapper {
	width: 605px;
	left: 50%;
    margin-left: -302.5px;
	position: absolute; 
	background: transparent;
	border: 2px solid black;
	height: 240px;
}

.test1 {
	border: 2px solid green;
	width: 200px;
	height: 30px;
    position: relative;
    right: 0;
}

.test2 {
	border: 2px solid red;
	width: 600px;
	height: 200px;
    position: relative;
}

.test3 {
	border: 2px solid black;
	width: 100px;
	height: 20px;
    position: absolute;
    bottom: 20px;
    right: 0;
}