JSFiddle - React, Tailwind, and code Playground

HTML

<div class="info">Stuff, where theres varying text!  Stuff, where theres varying text!   Stuff, where theres varying text!   Stuff, where theres varying text!   Stuff, where theres varying text!   Stuff, where theres varying text!   Stuff, where theres varying text!   Stuff, where theres varying text!   Stuff, where theres varying text!   Stuff, where theres varying text!   Stuff, where theres varying text!
    <div class="detailContainer">
        <div class="detailview">other button should be at top</div>
        <div class="obutton">Button should be at bottom</div>
    </div>
</div>

CSS

.info {
    width:90%;
    height:90%;
    margin:5%;
    position:absolute;
    top:0;
    left:0;
    z-index:1;
    background: rgba(204,204,204,0.92);
    transition:opacity 0.5s;
    opacity:0.5;
}
.detailsContainer
{
	width: 100%;
	height:inherit;
	overflow: hidden;
	position: relative;	
}

.detailview
{
	width: 30%;
	height: 29px;
	background-color: rgba(204,204,204,0);
	text-align: center;
	display: inline-block;
}

.obutton
{
	text-align: center;
	font-weight: bold;	
	width: 100%;
    height: 29px;
    background:rgba(204,204,204,0);
    position: absolute;
    bottom: 0; 
    margin-right: 10%;
	color: #666;
}