JSFiddle - React, Tailwind, and code Playground

HTML

<table>
    <tr>
        <td>
            <div>
                <span class="edit"></span>
                <span class="view_mode">Имя поля</span>
                <span class="edit_mode"><input type="text" value="Имя поля"></span>
            </div>
        </td>
        <td>
            <span>
                <input type="text">
                <span class="edit_mode"><span class="delete">удалить</span></span>
            </span>
        </td>
    </tr>
    <tr>
        <td>
            <div>
                <span class="edit"></span>
                <span class="view_mode">Еще одно поле</span>
                <span class="edit_mode"><input type="text" value="Еще одно поле"></span>
            </div>
        </td>
        <td>
            <span class="view_mode">
                <select>
                    <option value="">Вариант 1</option>
                    <option value="">Вариант 2</option>
                    <option value="">Вариант 2</option>
                </select>
            </span>
            <span class="edit_mode">
                <input type="text" value="Вариант 1"> <span class="delete">удалить</span><br>
                <input type="text" value="Вариант 2"> <span class="delete">удалить</span><br>
                <input type="text" value="Вариант 3"> <span class="delete">удалить</span><br>
                <span class="add">Добавить вариант</span>
            </span>
        </td>
    </tr>
</table>

CSS

body {
    padding: 10px;
}

.edit_mode {
    display: none;
}

table {
    width: 300px;
    table-layout: fixed;
    background: silver;
}

table tr {
     border-top: 1px solid gray;
}

table tr:first-child {
    border-top: none;
}

table td {
    vertical-align: baseline;
}

td:first-child {
    width: 120px;
}

td:first-child > div {
    position: relative;
    padding-left: 25px;
}

.edit {
    background: url(http://jsfiddle.net/img/actions.png) 0 -140px no-repeat;
    position: absolute;
    width: 14px;
    height: 14px;
    left: 4px;
    top: 3px;
    cursor: pointer;
}

input[type="text"] {
    width: 80px;
}

.add,
.delete {
    cursor: pointer;
    font-size: 0.8em;
    border-bottom: 1px dashed;
    color: 111;
}

JavaScript

var editMode = false;

$('.edit').click(function() {
    var row = $(this).closest('tr');
    
    if (editMode) {
        $('.view_mode').show();
        $('.edit_mode').hide();
        editMode = false;
    } else {
        row.find('.view_mode').hide();
        row.find('.edit_mode').show();
        editMode = true;
    }
   
});