JSFiddle - React, Tailwind, and code Playground

HTML

<div class="listmail module">
	<form action="" method="POST">
	  <div href="#" class="mail">
		  <div class="maincontrols">
			  <label class="myCheckbox">
    	  		<input type="checkbox" name="test" />
    	  		<span></span>
	  		</label>
        <span class="details">x</span>
        <a class="title" href="#">Working The Graveyard</a>
      </div>
  		<div class="summary">
	  		<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>
  </form>
</div>

CSS

div.listmail {
	width: 100%;
}

div.listmail div.mail {
	font-size: .9em;
	background-color: rgba(255, 255, 255, 0.6);
	transition: box-shadow .1s ease-in-out;
	width: 100%;
  outline: 1px solid #222;
}

div.listmail div.mail div.maincontrols {
	float: left;
	width: 350px; /* It must to be a set value/length */
	background-color: red;
}

div.listmail div.mail label.myCheckbox {
	margin: 0 .5em;
	display: inline-block;
}

div.listmail div.mail div.details {
	margin: 0;
}

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

div.listmail div.mail div.summary {
  /* Must fill until it's end */
	color: #999;
	background-color: green;
	padding: 1em;
	text-overflow: ellipsis;
	overflow: hidden;
	white-space: nowrap;
}