JSFiddle - React, Tailwind, and code Playground

HTML

<div class="module listmail">
	<div href="#" class="mail">
		<div class="maincontrols">
      <input class="checkbox" type="checkbox" name="selectedMessages" value="1234">
			<span class="details">x<span>
			<a class="title" href="#">Working The Graveyard<a>
		</div>
		<div class="summary">
			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.
		</div>
	</div>
</div>

CSS

div.listmail {
	width: 80%;
}

div.listmail div.mail {
	font-size: .9em;
	background-color: red;
	border-top: 1px solid rgba(0, 0, 0, 0.1);
	border-bottom: 1px solid rgba(0, 0, 0, 0.1);
	transition: box-shadow .1s ease-in-out;
	width: 100%;
	display: flex;
  /* overflow: hidden;      // "solves" it */
}

div.listmail div.mail div.maincontrols {
	width: 400px;
	white-space: nowrap;
}

div.listmail div.mail input.checkbox {
}

div.listmail div.mail div.details {
}

div.listmail div.mail a.title {
	white-space: nowrap;
}

div.listmail div.mail div.summary {
	text-overflow: ellipsis;
	overflow: hidden;
	white-space: nowrap;
}