JSFiddle - React, Tailwind, and code Playground

HTML

<div class="wrapper">

    <div class="test1">test1</div>

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

</div>

CSS

.wrapper {
/*
    width: 605px;
*/
    margin: 0 auto;
    position: relative;
    background: transparent;
    border: 1px solid black;
/*
    height: 240px;
*/
    overflow: hidden;
}

.test1 {
    border: 1px solid black;
    width: 200px;
    height: 30px;
    display: block;
    float: right;
    position: relative;
}

.test2 {
    border: 1px solid red;
    width: 600px;
    height: 200px;
    display: block;
    float: right;
    position: relative;
}

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