JSFiddle - React, Tailwind, and code Playground

HTML

<div id="main">
    <div class="left w60">
        <div class="center">
            	<h2>Request</h2>

        </div>
        <div>
            <div>
                <input id="url" placeholder="Request URL .." class="w100" />
            </div>
            <br/>
            <div>
                <select id="method">
                    <option value="0">GET</option>
                    <option value="1">HEAD</option>
                </select>
                <button type="button" id="submit">Submit</button>
            </div>
            <br/>
            <div class="tabs">
                <div class="tab">
                    <input type="radio" id="tab-1a" name="tab-group-1" hidden checked />
                    <label class="tabLabel" for="tab-1a">Headers</label>
                    <div class="content">
                        <div id="headersRequest">
                            <table id="headersRequestTable" class="w100">
                                <tr>
                                    <th>Name</th>
                                    <th>Value</th>
                                    <th>
                                        <input type="button" id="newHeaderButton" value="+" />
                                    </th>
                                </tr>
                            </table>
                        </div>
                    </div>
                </div>
                <div class="tab">
                    <input type="radio" id="tab-2a" name="tab-group-1" hidden checked />
                    <label class="tabLabel" for="tab-2a">Body content</label>
                    <div class="content">
                        <div id="bodyRequest">
                            <textarea id="bodyRequestListItem" rows="10" class="w100"></textarea>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <hr>
        <div class="center">
            	<h2>Response</h2>

    ...

CSS

.left {
    float: left;
}
.right {
    float: right;
}
.center {
    text-align: center;
}
.w30 {
    width: 30%;
}
.w40 {
    width: 40%;
}
.w50 {
    width: 50%;
}
.w60 {
    width: 60%;
}
.w100 {
    width: 100%;
}
.bCollapse {
    border-collapse: collapse;
}
/*
 * Tabs
 */
 .tabs {
    position: relative;
    height: 100%;
    min-height: 200px;
    clear: both;
    margin: 35px 0 25px;
    display:block;
}
.tab {
    float: left;
}
.tabLabel {
    background: #eee;
    padding: 10px;
    border: 1px solid #ccc;
    margin-left: -1px;
    position: relative;
    left: 1px;
    top: -20px;
}
.content {
    position: absolute;
    top: 2px;
    left: 0;
    right: 0;
    bottom: 0;
    padding: 20px;
    opacity: 0;
}
[type=radio]:checked ~ label {
    background: white;
    border-bottom: 1px solid white;
    z-index: 2;
}
[type=radio]:checked ~ label ~ .content {
    z-index: 1;
    opacity: 1;
}

JavaScript

window.addEventListener('click', function (event) {
    if (event.target.id.indexOf('newHeaderButton') === 0) {
        addHeader();
    }
});


function addHeader() {

    var tr = document.createElement("tr"),
        tdName = document.createElement("td"),
        tdValue = document.createElement("td"),
        inputName = document.createElement("input"),
        inputValue = document.createElement("input"),
        inputButton = document.createElement("input");

    inputButton.type = "button";
    inputButton.value = "-";
    inputButton.onclick = function () {
        document.getElementById('headersRequestTable').deleteRow(
        this.parentNode.rowIndex);
    };

    tdName.appendChild(inputName);
    tdValue.appendChild(inputValue);
    tr.appendChild(tdName);
    tr.appendChild(tdValue);
    tr.appendChild(inputButton);
    document.getElementById("headersRequestTable").appendChild(tr);
}