JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="http://cdn.kendostatic.com/2011.3.1129/styles/kendo.common.min.css">
<link rel="stylesheet" href="http://cdn.kendostatic.com/2011.3.1129/styles/kendo.default.min.css">
<script src="http://cdn.kendostatic.com/2011.3.1129/js/kendo.all.min.js"></script>
<section>
    <div id="left_col">
      <div class="section1">
         
    </div>
  </div>
  <div id="main_col">
     second col
       <div class="field">
              <button id="btn_submit" class="k-button">Enviar</button>
          </div>
  </div>
</section>

CSS

body {
    font: 12px/1.5 Tahoma,sans-serif;
}

JavaScript

$(document).on('ready',function(){    
    var splitter = $("section").kendoSplitter({
        panes: [{
            size: "220px",
            min: "200px",
            max: "300px",
            collapsible: true
        }, {}]
    });
    
    $('#btn_submit').on('click',function(){      
      splitter.data("kendoSplitter").collapse("#left_col");
    });
});