JSFiddle - React, Tailwind, and code Playground

by Trisox

HTML

<table>
    <tr>
        <td>
            <div class="ui-box">
                <div class="inputField">
                    <i class="left">i</i>
                    <label for="">something</label>
                    <input type="text"/>
                    <i class="right">i</i>
                </div>
            </div>
        </td>
        <td>
            <div class="ui-box">
                <div class="inputField">
                    <i class="left">i</i>
                    <label for="">something</label>
                     <input type="text"/>
                    <i class="right">i</i>
                </div>
            </div>
        </td>
    </tr>
</table>

CSS

.ui-box{
    position:relative;
}

.left{
    position:absolute;
    bottom:0;
    left:0;
}

.right{
    position:absolute;
    bottom:0;
    right:0;
}


.inputField{
    width:calc(100% - 30px - 30px);
    border-bottom:2px solid #ccc;
    display:inline-block;
    position:absolute;
    margin:0 20px;
    padding:0 10px;
}

.inputField:before{
    border-bottom-left-radius:65px;
    border-left:2px solid #ccc;
    border-bottom:2px solid #ccc;
    display:inline-block;
    height:15px;
    width:30px;
    position: absolute;
    content: "";
    bottom:0px;
    left:-20px;
    margin-bottom:-2px;
}

.inputField:after{
    bottom:0;
    border-bottom-right-radius:65px;
    border-right:2px solid #ccc;
    border-bottom:2px solid #ccc;    
    display:inline-block;
    height:15px;
    width:30px; 
    position: absolute;
    content: "";
    right:-20px;
    margin-bottom:-2px;    
}

input{
    width:100%;
    display:inline-block;
}

label{
    display:block;
    position:relative;
}





table{
    width:100%;
}