JSFiddle - React, Tailwind, and code Playground

HTML

<div class="container cf">
    <div class="link">
        <div class="linkButton">
            <input type="button" value="link" />
        </div>
    </div>
    
    <div class="tab table1">Table left </div>
    <div class="tab table2">Table right</div>
</div>
<div class="anotherDiv"> This is another div</div>

CSS

.cf:before,
.cf:after {
    content: " "; /* 1 */
    display: table; /* 2 */
}

.cf:after {
    clear: both;
}

/**
 * For IE 6/7 only
 * Include this rule to trigger hasLayout and contain floats.
 */
.cf {
    *zoom: 1;
}

.container { width:800px;position:relative;margin-bottom:80px;}
.link { border: 2px dashed grey;width:50%;position:absolute;left:200px;bottom:-60px;height:60px;border-top-width:0;}
.linkButton {width:100%;text-align:center;}
.link input[type="button"] { position:absolute;bottom:-10px;}
.tab { width:350px;background:#00395c;color:#fff;height:250px;position:relative;}
.table1 { float:left;}
.table2 { float:right;}

.anotherDiv { height:200px;width:100%;background:green;}