JSFiddle - React, Tailwind, and code Playground

by Julesezaar

HTML

<script src="https://code.jquery.com/jquery-3.4.1.slim.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.css">
<!-- 
  Bootstrap docs: https://getbootstrap.com/docs
-->

<div class="px-5">
  <div class="row">
    <div class="col">
      A few words
    </div>
    <div class="col-auto">
      <div class="btn btn-primary">Right</div>
    </div>
  </div>
  <div class="row">
    <div class="col">
     
      Left always gets the maximum amount of space. Left always gets the maximum amount of space.Left always gets the maximum amount of space. Left always gets the maximum amount of space.
    </div>
    <div class="col-auto">
      <div class="btn btn-primary">Right</div>
    </div>
  </div>
</div>
<div class="px-5">
  <div class="row">
    <div class="col">
      <h6>
      Responsive example
      </h6>
      Left always gets the maximum amount of space. Left always gets the maximum amount of space. Left always gets the maximum amount of space. Left always gets the maximum amount of space.
    </div>
    <div class="col-12 col-sm-auto">
      <div class="btn btn-primary">Right (Left on small)</div>
    </div>
  </div>
</div>

CSS

.row {
  background: #f8f9fa;
  margin-top: 20px;
  border: solid 1px #6c757d;
}

.row > [class*="col"] {
  padding: 10px;
}