JSFiddle - React, Tailwind, and code Playground

by Shahroz Asif

HTML

<div class="btn bg-red"><div class="auto">This buttons width expands as I write more and more text.</div></div>

CSS

.btn {
  padding-left: 10px;
  padding-right: 10px;
  display: inline-block !important;
  border-radius: 6px;
  color: #ffffff;
  padding-top: 10px;
  padding-bottom: 10px;
}
.auto {
  height: 20%
}
.bg-red{background-color:#F55C58;}
.bg-red:hover{background-color:#F44946}

JavaScript

var cw = $('.auto').width();
$('.auto').css({'height':cw+'px'});