Something on left, something on right, fluid

[mhulse]

/*
Best for photos with captions to right or left:
<div class="bunch bunch-[right|left]">
	<(any element)>
	<(any element)>
</div>
*/

.bunch { margin: 20px 0; }
.bunch::after {
	content: "";
	display: table;
	clear: both;
}
.bunch.bunch-left > :first-child {
	margin: 0 20px 0 0;
	float: left;
	display: inline;
}
.bunch.bunch-right > :first-child {
	margin: 0 0 0 20px;
	float: right;
	display: inline;
}
@media (min-width: 737px) {
	.bunch.bunch-left > :first-child { margin-right: 40px; }
	.bunch.bunch-right > :first-child { margin-left: 40px; }
}
.bunch > :last-child {
	margin: 0;
	overflow: auto;
}
.bunch > * > :first-child { margin-top: 0; }
.bunch > * > :last-child { margin-bottom: 0; }

… for a responsive version of the above, change the overflow on :last-child to visible and add a media query (at desired breakpoint) to handle the “columnization” of the elements:

.bunch > :last-child { overflow: visible; }
@media (min-width: 768px) {
	.bunch > :last-child { overflow: auto; }
}