JSFiddle - React, Tailwind, and code Playground

by Jake

HTML

<div class="wrap">
<table><tbody><tr>
				<td class="featured-image-wrap"><img src="http://placehold.it/110x71" alt="Pages from great-day-poster-updated (1)" height="110" width="71"></td>
				<td>
						<p class="announcement-title featured-title">Test #1</p>
						<p class="short-description">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla ornare euismod sollicitudin. Donec eu scelerisque libero, quis laoreet metus.…</p>
				</td>
			</tr></tbody></table>

			<table><tbody><tr>
				<td class="featured-image-wrap" ><img src="http://placehold.it/110" class="attachment-featured-thumb" alt="Cm4Xcf6y" height="110" width="110"></td>
				<td>
						<p class="announcement-title featured-title" >Test #2</p>
						<p class="short-description">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla ornare euismod sollicitudin. Donec eu scelerisque libero, quis laoreet metus.…</p>
				</td>
			</tr></tbody></table>

			<table><tbody><tr>
				<td class="featured-image-wrap"><img src="http://placehold.it/125x110" class="featured-image"></td>
				<td>
						<p class="announcement-title featured-title" >CCOWE Presentation</p>
						<p class="short-description" >CCOWE, or Critical and Creative Ongoing Work in English, will be presented by two students. Free pizza lunch beginning at 12noon (no R...</p>
				</td>
			</tr></tbody></table>
		
</div>

CSS

/** 
 * The question here is: Why do the cells respect the pixel width 
 * but not the percentage width, when they are contrained to 
 * a narrow display?
 */
 
td.featured-image-wrap {
  width: 27%;
  xwidth: 125px;
}

.wrap {
  margin: 5px 2em;
}
table {
  width: 100%;
}
td {
  font-size: 16px;
  padding: 5px;
  outline: 1px solid blue;
}
td.featured-image-wrap {
  padding: 0 5px 0 0;
  text-align: center;
  vertical-align: middle
}
p {
  margin: 4px 0;
}