JSFiddle - React, Tailwind, and code Playground

by Pris Wiz

HTML

<div class="container">

<div class="one">
One
</div>


<div class="two">
    <div class="secOne">
        mid
    </div>
     <div class="secTwo">
                  <button>add</button>

         <span class="input">
             <input type="text"/>
         </span>
    </div>
</div>


<div class="three">
three
</div>








</div><!--container -->

CSS

.container{ width: 80%; margin: 0 auto; background: green;}
.two{width:100%; height: auto; background: #000;display: inline-block;}
.secOne{float:left; background: blue; color: #fff;width: 30%;}
.secTwo{float:left;background: red; color: #fff; width: 70%;}
.input {
    display: block;
    border: 1px solid #E5E5E5;
    padding: 1px 2px;
    overflow: auto;
}
.input input {
    display: block;
    float: left;
    background: transparent;
    width: 100%;
    height: 30px;
    border: 0;
    padding: 0;
    margin: 0;
}
button {
    float: right;
}

JavaScript

// percentage widths for input hp site