JSFiddle - React, Tailwind, and code Playground

HTML

<div id="coded" class="btn-group">
  <h4>Coded Output</h4>
  <button>Hello World</button>
  <button>Hello World</button>
  <button>Hello World</button>
  <button>Hello World</button>
</div>
<div id="actual" class="btn-group">
  <h4>Actual Output</h4>
  <button>Hello World</button>
  <button>Hello World -  Addln Content</button>
  <button>Hello World</button>
  <button>Hello World</button>
</div>
<div id="expected" class="btn-group">
  <h4>Expected Output</h4>
  <div class="expected">
    <button>Hello World</button>
    <button>Hello World -  Addln Content</button>
    <button>Hello World</button>
    <button>Hello World</button>
  </div>
</div>

CSS

button{
  min-width:130px;
  height:40px
}

.expected button,
#actual.two-lines button {
  min-width:200px !important;
}

JavaScript

$(function () {
  var rows = 0,
      last = null;
  $('#actual button').each(function () {
    var offset = $(this).offset();
    if(last !== offset.top) {
      rows++;
    }
    last = offset.top;
  });
  
  // Note this is hard-coded for 2 lines, and adds a line break after
  // the 2nd element, but you can change as needed to work in general
  if(rows === 2) {
    $('#actual').addClass('two-lines');
    $('#actual button:eq(1)').after('<br/>');
  }
});