JSFiddle - React, Tailwind, and code Playground

HTML

<div class="main">
 <div class="content">
  <p>
  Main content goes here.
  </p>
  <pre>
    <code>
      hFile = CreateFileW(fn[2], FILE_WRITE_DATA, 0, 0, CREATE_NEW, FILE_FLAG_NO_BUFFERING|FILE_FLAG_WRITE_THROUGH, 0);
      if(hFile == NULL)
      {
        //Do something
      }
    </code>
  </pre>
 </div>
 <div class="sidebar">
   Side Bar
 </div>
</div>

CSS

.main{
  display: flex;
}
.content{
  flex: 4;
  background-color: yellow;
}
.sidebar{
  flex: 1;
  background-color: lightgreen;
  max-width: 100px;
  min-width: 50px;
}
pre{
  border-radius: 0.3em;
	margin: 1.5em 0;
  background-color: lightblue;
	overflow-x: auto;
	resize: vertical;
}
pre code{
	text-align: left;
	white-space: pre;
	word-spacing: normal;
	word-break: normal;
	word-wrap: break-word;
	tab-size: 4;
	cursor: text;
	font-size: 12px;
	font-family: 'Courier New', Courier, monospace;
  line-height: 1.4;
}