JSFiddle - React, Tailwind, and code Playground

by InfinitiesLoop

HTML

<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/2.3.2/css/bootstrap.min.css">
<table class="table-striped table-hover contentproviders">
    <thead>
        <tr>
            <th>Enabled</th>
            <th>Collapsible</th>
            <th>Name</th>
            <th>Domains</th>
            <th>Capture (Regex)</th>
            <th>Output (HTML)</th>
            <th>Script</th>
            <th>Title</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td><input type="checkbox" name="enabled" /></td>
            <td><input type="checkbox" name="collapsible" /></td>
            <td><input type="text" name="name" class="input-mini" /></td>
            <td><input type="text" name="domains" class="input-small" /></td>
            <td><input type="text" name="capture" class="input-mini" /></td>
            <td><input type="text" name="output" class="" /></td>
            <td><input type="text" name="script" class="input-small" /></td>
            <td><input type="text" name="title" class="input-small" /></td>
        </tr>
        <tr>
            <td><input type="checkbox" name="enabled" /></td>
            <td><input type="checkbox" name="collapsible" /></td>
            <td><input type="text" name="name" class="input-mini" /></td>
            <td><input type="text" name="domains" class="input-small" /></td>
            <td><input type="text" name="capture" class="input-mini" /></td>
            <td><input type="text" name="output" class="" /></td>
            <td><input type="text" name="script" class="input-small" /></td>
            <td><input type="text" name="title" class="input-small" /></td>
        </tr>        
    </tbody>
</table>

<ul class="unstyled contentproviders">
    <li>
        <div>
            
            <div class="controls">
                <label class="control-label" for="name">Name</label>
                <input type="text" id="name" name="name" class="input-small inline" />
                <label...

CSS

table.contentproviders td {
    vertical-align: top;
    text-align: center;
}

ul.contentproviders > li > div:first-child {
    display: inline-block;
    width: 250px;
    vertical-align: top;
}
ul.contentproviders > li > div:last-child {
    display: inline-block;
    width: 250px;
    vertical-align: top;
}

JavaScript

$("ul.contentproviders").on("change", ".docwrite", function(ev) {
    var $target = $(ev.target),
        usesDocWrite = $target.prop("checked");
    $target
        .closest("li")
        .find(".contentprovider-html")
        .toggle(!usesDocWrite)
        .end()
        .find(".contentprovider-docwrite")
        .toggle(usesDocWrite);
});