JSFiddle - React, Tailwind, and code Playground

HTML

<div class="sectional-content"> 
  <div class="wrapper">
      <div class="centered-container">
          <div class="tabs-content">
            <div class="divider1"></div>

            <table class="template-editor" cellpadding="0" cellspacing="0">

              <tbody>
                <tr>
                  <td class="add-remove-template">
                    <div class="scroll-container" style="height: 360px">
                      <ul id="cardListHolder">
                        <li></li>
                      </ul>
                    </div>
                  </td>
                  <td class="edit-card">
                    <div class="inner">
                      
                    </div>
                  </td>
                  <td class="preview-template">
                    <div class="preview-panel">
                     
                    </div>
                  </td>
                </tr>
              </tbody>
            </table>

          </div>
        </div>
      </div>
   </div>

CSS

*, *::before, *::after {
    box-sizing: border-box;
}
ul {
    list-style: outside none none;
    margin: 0;
}
.sectional-content{
      background: #f6f6f6;
    color: #222;
    cursor: auto;
    font-family: "Helvetica Neue",Helvetica,Roboto,Arial,sans-serif;
    font-style: normal;
    font-weight: normal;
    line-height: 1.5;
    margin: 0;
    padding: 0;
    position: relative;

}
.wrapper {
    min-height: 100%;
    position: relative;
}
.centered-container{
   margin-left: auto;
    margin-right: auto;
width: 96.6667%;
padding-left: 0.3125rem;
    padding-right: 0.3125rem;
    position: relative;
}
.tabs-content {
    background: #fff none repeat scroll 0 0;
    border: 1px solid red;
    margin-top: -1px;
    padding: 1.5625rem;
     margin-bottom: 0;
    width: 100%;
}
.divider1{
  height: 18px;
}
 .template-editor {
    background: #fff none repeat scroll 0 0;
    border: 0 none;
    margin-bottom: 1.25rem;
    table-layout: auto;
}
.template-editor tr {
    background: transparent none repeat scroll 0 0 !important;
}
.add-remove-template, .edit-card {
    padding-top: 5px !important;
    vertical-align: top;
}
.add-remove-template {
    border-left: 0 none;
    padding-left: 0 !important;
    padding-right: 0 !important;
    vertical-align: top;
}
table tr th, table tr td {
    color: #222;
    font-size: 0.875rem;
    padding: 0.5625rem 0.625rem;
    text-align: left;
}
#cardListHolder {
    padding-top: 0.4375rem;
    width: 21.5625rem;
}
.preview-template, .edit-card {
    border-left: 2px solid #808285;
    padding: 0 1.875rem !important;
    vertical-align: top;
}
.edit-card .inner {
    margin: auto;
    padding: 0 2.1875rem;
    width: 18.75rem;
}
.preview-panel {
    background: rgba(0, 0, 0, 0) url("http://cdnsq.ur-nl.com/assets/mobile-898fc89b167945138c3d9f551a5ce551.png") no-repeat scroll center 0;

    height: 26.25rem;
    margin: auto;
    padding: 3.4375rem 0.8125rem 0;
    width: 13.3125rem;
}