JSFiddle - React, Tailwind, and code Playground

by koh_edwin

HTML

<table>

		<tr>
			<td style="background-color: #007CE2">
      <p id="t1_list">test<br>another<br>testing</p>
				<input  type="text" name="t1_input" id="t1_input">
				<button>
					Add
				</button>
      
				
			</td>
			<td style="background-color: #E54040">
				<p id="t2_list"></p>
				<div class="value_input2">
					<input type="text" name="t2_input" id="t2_input">
					<button>
						Add
					</button>
				</div>
			</td>
		</tr>

		<tr>
			<th style="background-color: #8BC34A">
				Test
			</th>
			<th style="background-color: #FF9800">
				Test
			</th>
		</tr>
		<tr>
			<td style="background-color: #8BC34A">
				<p id="t3_list"></p>
				<input type="text" name="t3_input" id="t3_input">
				<button>
					Add
				</button>
			</td>
			<td style="background-color: #FF9800">
				<p id="t4_list"></p>
				<input type="text" name="t4_input" id="t4_input">
				<button>
					Add
				</button>
			</td>
		</tr>
	</table>

CSS

table {
    		border-collapse: collapse;
		}

		table, th, td {
		    border: 2px solid black;
		}

		div.value_input {
			position: absolute;
      bottom: 0;
		}
    
    #t1_list{
     
     vertical-align: top}
    #t1_input{
      
      vertical-align: bottom;
    }
    tr{
      height: 200px;
    }
    div.value_input2 {
			display: table-cell;
      vertical-align: bottom;
		}