JSFiddle - React, Tailwind, and code Playground

HTML

<form id="add">
<table cellspacing="0" cellpadding="0" align="center">
    <tr>
        <th>Select Pattern</th>
        <th>Describe Item</th>
        <th>Add</th>
    </tr>
    <tr>
        <td><select name="pattern">
            <option>pattern 1</option>
            <option>pattern 2</option>
            <option>pattern 3</option>
            <option>pattern 4</option>
            <option>pattern 5</option>
            <option>pattern 6</option>
            <option>pattern 7</option>
            </select>
        </td>
        <td><input type="text" name="item"></td>
        <td><input type="submit" name="submit" value="+"></td>
    </tr>
</table>
</form>

<br>
<br>

<form id="list">
<table cellspacing="0" cellpadding="0" width="400">
    <tr>
        <th>Pattern</th>
        <th>Item</th>
        <th>Action</th>
    </tr>
    <tr>
        <td>Pattern 1</td>
        <td>Evening bag</td>
        <td><input type="submit" name="delete" value="-"> <input type="submit" name="edit" value="Edit"></td>
    </tr>
    <tr>
        <td>Pattern 7</td>
        <td>Beaded clutch</td>
        <td><input type="submit" name="delete" value="-"> <input type="submit" name="edit" value="Edit"></td>
    </tr>    
    <tr>
        <td>Pattern 4</td>
        <td>Backpack</td>
        <td><input type="submit" name="delete" value="-"> <input type="submit" name="edit" value="Edit"></td>
    </tr>       
</table>            
</form>

CSS

body { font-family:arial,helvetica,sans-serif ; font-size:13px }
table { margin:12px auto }
th { padding:2px 6px }
td { padding:2px 6px }
#add input[type="text"] { height:18px ; width:150px }
#add select { height:20px }
#add input[type="submit"] { padding:2px 5px }

#list th { padding-bottom:12px ; font-weight:bold }
#list input[type="submit"] { padding:2px 6px ; min-width:22px }