JSFiddle - React, Tailwind, and code Playground

HTML

<div class="tab-list">
  <div class="tab list">
    List
  </div>
  <div class="tab create">
    +
  </div>
  <!--
  <div class="tab record" data-sysid="">
    <div class="tab-title">CAE-22LEODUSBPYUMYSL-001</div>
    <div class="close-tab">X</div>
  </div>
  -->
</div>

<div class="tab-content">
  <div class="tab-content-list">
    <button data-sysid="12345" data-title="INC1000303" class="tab-content-list-button">
      INC1000303
    </button>
  </div>
</div>

CSS

@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;600&display=swap');

html, body {
    font-family: 'Poppins', sans-serif !important;
    padding: 0;
    margin: 0;
}

.tab-list {
  width: 100%;
  display: block;
  font-size: 14px;
}

.tab-list div {
  float: left;
  margin: 0;
}

.tab {
  padding: 5px;
  padding-left: 10px;
  padding-right: 10px;
  border: 1px solid #000;
  text-align: center;
  max-width: 250px;
}

.tab div {
  display: inline-block;
  float: left;
}

.tab-title {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  max-width: 240px;
}

.close-tab {
  margin-left: 10px !important;
  width: 15px;
  background-color: #ddd;
  border-radius: 20px;
  font-size: 10px;
  font-weight: bold;
}

.list {
  width: 40px;
}

.create {
  width: 25px;
}

.tab-content {
  max-width: 100%;
}

.tab-content div {
  border: 1px solid #000;
  display: inline-block;
  width: 100%;
  -webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
  -moz-box-sizing: border-box;    /* Firefox, other Gecko */
  box-sizing: border-box;         /* Opera/IE 8+ */
}

.tab-content-list {
  padding: 5px;
}

JavaScript

var recordHtml = '<div class="tab-content-record" data-sysid="">This is a record opened from the list.</div>';

// Open Record Tab
$(".tab-content-list-button").click(function () {
  var sysId = $(this).data('sysid');
  var title = $(this).data('title');
	var tabHtml = '<div class="tab record" data-sysid="' + sysId + '"><div class="tab-title">' + title + '</div><div class="close-tab">X</div></div>';
  
  if ($('.tab').attr('data-sysid') != sysId) {
  	$(".tab-list").append(tabHtml);
  }
  
  //$(".tab-list").append(tabHtml);
	
})