JSFiddle - React, Tailwind, and code Playground

HTML

<!DOCTYPE html>
<html lang="en" dir="ltr">

  <head>
    <meta charset="UTF-8">
  </head>

  <body>
    <div id="header"></div>
    <div id="mainContainer">
      <div class="subContainer">
        <span class="name">aaaaaaaaaaaaaaaaaaaaaaaaa</span>
        <span class="talent" style="background-color: red;">bbb</span>
        <span class="talent" style="padding: 5px; margin: 5px;">c</span>
      </div>



    </div>
  </body>

</html>

CSS

* {
  margin: 0;
}

html,
body {
  height: 100%;
  margin: 0;
}

#header {
  width: 100%;
  height: 100px;
  background-color: black;
  color: white;
  position: relative;
  font-size: 25px;

}
#mainContainer {
  display: table;
  width: 50%;
  background-color: yellow;
  margin: auto;
  padding-left: 100px;
  padding-right: 100px;
  height: 100%;
  min-height: 100%;
  max-height: 100%;
}

.subContainer {
  background-color: #555;
  color: white;
  padding: 10px 10px 10px 10px;
  margin: 1rem 0px 0px 0px;

  align-items: center;
  display: flex;

}

.name {
  margin-right: auto;
  width: 50%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  position: relative;
}

.talent {
  background-color: black;
  color: white;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}