title: ReactJs Side bar right side content
body: <p>I have used library <code>react-pro-sidebar</code> to create my collapsible sidebar with Icons,  My problem is how can I make my <code>main</code> content on the right side (<em>beside the collapsible sidebar</em>) and also make it responsive at the same time.</p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>import React, { useState } from 'react';
  import './styles/dashboard.css';
  import 'react-pro-sidebar/dist/css/styles.css';
  import { BuildHeaderDashboard, BuildTopNavigationBar, BuildSideBar } from './Dashboard';
  
  export const CompanyPortal = () =&gt;  {
      const [toggleCollapse, setToggleCollapse] = useState(false);
  
      const handleToggleCollapse = (event) =&gt; {
          setToggleCollapse(!toggleCollapse);
  
      }
  
  
      return (
          &lt;div&gt;
              &lt;BuildSideBar isToggleCollapse={toggleCollapse} /&gt;
              &lt;main style={toggleCollapse ? { left: '3.25%' } : { left: '16%' } }&gt;testfdsafdasfd afd asfd asfd haskf hdashf kjdsahfk jdsahkf hdashf dsahf dshaf hdask fhjdasj&lt;/main&gt;
          &lt;/div&gt;
      );
  }
  
  export default CompanyPortal;</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>main {
      position: relative;
      padding: 24px;
      flex-grow: 1;
      display: flex;
      flex-direction: column;
      overflow-y: auto;
  }
  
  .pro-sidebar {
      position: absolute !important;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"&gt;&lt;/script&gt;
  &lt;script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"&gt;&lt;/script&gt;</code></pre>
  </div>
  </div>
  </p>
  <p>Quick GIF sample: <a href="https://gyazo.com/0c042d72dda56defadb5192c10df73af" rel="nofollow noreferrer">https://gyazo.com/0c042d72dda56defadb5192c10df73af</a></p>
  <p>As you can see in the GIF I uploaded the text doesn't seem to be responsive and it tends to overflow on the left side while dragging the browser screen to lower.  Does anyone know how to achieve this?</p>