JSFiddle - React, Tailwind, and code Playground

HTML

<div class="parent">
		  <div class="firstpart">
    	  <input id="checkbox" type="checkbox" name="test" />
        <span class="details">x</span>
        <a class="title" href="#">Working The Graveyard</a>
      </div>
  		<div class="secondpart">
	  		<span>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum facilisis, sem non tempor volutpat, tortor tellus consectetur ante, sed iaculis ex felis in libero. Phasellus in ornare mi, vel rutrum nisl. Cras in laoreet enim. Ut at tempor sapien, vitae ornare nibh. Nam euismod nec dui in ullamcorper. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Integer varius eu elit eu dapibus. Proin ultrices pretium lobortis.
        </span>
	  	</div>
    </div>

CSS

div.parent {
	background-color: rgba(255, 255, 255, 0.6);
	width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  outline: 1px solid #222;
}

div.parent div.firstpart {
	width: 800px; /* THAT'S NOT HOW IT WORKS! */
	background-color: red;
  display: flex;
  align-items: center;
  justify-content: center;
}

div.parent a.title {
	color: #000;
  text-decoration: none;
  white-space: nowrap;
}

div.parent div.secondpart {
	color: #222;
	background-color: green;
	padding: 1em;
	text-overflow: ellipsis;
	overflow: hidden;
	white-space: nowrap;
}