JSFiddle - React, Tailwind, and code Playground

HTML

<h2>floats</h2>

<div class="container">
    <div class="content">Content</div>
    <div class="sidebar">Sidebar</div>
</div>

<h2>magin and floats</h2>

<div style="margin-bottom:10px;  ">
    <div style="float:left">Content</div>
    <div style="margin-left:240px; position:relative;">Sidebar3</div>
    <div style="margin-left:340px; position:relative;">Sidebar</div>
    </div>

<h2>display:inline-block</h2>

<div class="container3">
    <div class="content3">Content</div>
    <div class="sidebar3">Sidebar</div>
</div>

CSS

.container {
  width:500px;
  background:#DADADA;
  overflow:hidden; /* also used as a clearfix */
  margin-bottom:10px;
}

.content {
  float:left;
  background:green;
  width:350px
}
.sidebar {
  width:155px; /* Intentionaly has more width */ 
  float:right;
  background:lime;
}


.container2 {
  width:500px;
  background:#DADADA;
  overflow:hidden; /* also used as a clearfix */
  margin-bottom:10px;
}

.content2 {
  float:left;
  background:green;
  width:350px;
}
.sidebar2 {
  width:155px; /* Intentionaly has more width */ 
  margin-left:340px;
  /* Ignore this, it's just to show the green sidebar is not jumping to the next line, even though it "collides" */
  background:lime;
  z-index:100;
  position:relative;
  opacity:0.3;
}

.container3{
  width:500px;
  background:#DADADA;
}

.content3 {
  background:green;
  width:350px;
  display:inline-block !important;
}
.sidebar3 {
  width:140px; /* Intentionaly has more width */ 
  display:inline-block;
  /* Ignore this, it's just to show the green sidebar is not jumping to the next line, even though it "collides" */
  background:lime;
  z-index:100;
  position:relative;
  opacity:0.3;
}