JSFiddle - React, Tailwind, and code Playground

HTML

<table style="display:none">
    <tr>
        <td>
            <h2>Antes com table</h2>
            <select></select>
            <br>
            <input type="text">
        </td>
        <td>
            <h2>Antes com table</h2>
            <select></select>
            <br>
            <input type="text">
        </td>
    <tr>
<table>

    <hr>
    
<div class="container">
    <div class="row">
        <div class="col-xs-6">
            <h2>Com tableless responsivo</h2>
            <select></select>
            <br>
            <input type="text" />
        </div>
        <div class="col-xs-6">
            <h2>Com tableless responsivo</h2>
            <select></select>
            <br>
            <input type="text" />
        </div>
    </div>
</div>

CSS

* {margin:0;padding:0;box-sizing: border-box}

table input, table select { width: 290px; }

/***********************************************************************************/

.container {padding: 0 15px;}
.container select,.container input { width:100%;}
.row { margin: 0 -15px; }
.col-xs-6 {
    background: rgba(86,61,124,.15);
    border: 1px solid #ccc;
    position: relative;
    padding: 15px;
}
/*divs se comportarem como "TDs"*/
.container:before, .container:after,
.row:before, .row:after {
    display:table;
    content:" ";
    clear:both
}

/*Responsivo*/
@media (min-width: 768px){
    .col-xs-6 {float:left;width:50%}
}
/*largura máxima limite*/
@media (min-width: 1000px){
    .container {width: 970px;}
}