Primer

HTML

<div class="grey-section">
	<div class="inner">
		<div class="team-name-container">
			<div class="large-col-6 best-team-name">
				<div class="quiz-guide-heading">
				    <h2 class="quiz-night-heading">
				        <span>BEST TEAM NAMES</span>
				    </h2>
				</div>
			    <div class="quiz-team-name">
			    	<span>1</span> Team w/ short name
			    </div>
			    <div class="quiz-team-name quiz-team-name--coloured">
			    	<span>2</span> Team with a pretty long name
			    </div>
			    <div class="quiz-team-name">
			    	<span>3</span> Team w/ short name
			    </div>
			    <div class="quiz-team-name quiz-team-name--coloured">
			    	<span>4</span> Team with medium name
			    </div>
			    <div class="quiz-team-name">
			    	<span>5</span> Team with very, very, very long two-line name
			    </div>
			</div>
			<div class="large-col-6 worst-team-name">
				<div class="quiz-guide-heading quiz-guide-heading--red">
				    <h2 class="quiz-night-heading">
				        <span>WORST TEAM NAMES</span>
				    </h2>
				</div>
				<div class="quiz-team-name">
			    	<span>1</span> Team w/ short name
			    </div>
			    <div class="quiz-team-name quiz-team-name--coloured">
			    	<span>2</span> Team with a pretty long name
			    </div>
			    <div class="quiz-team-name">
			    	<span>3</span> Team w/ short name
			    </div>
			    <div class="quiz-team-name quiz-team-name--coloured">
			    	<span>4</span> Team with medium name
			    </div>
			    <div class="quiz-team-name">
			    	<span>5</span> Team with very, very, very long two-line name
			    </div>
			</div>
		</div>
	</div>
</div>

Twig

<div class="grey-section">
	<div class="inner">
		<div class="team-name-container">
			<div class="large-col-6 best-team-name">
				<div class="quiz-guide-heading">
				    <h2 class="quiz-night-heading">
				        <span>BEST TEAM NAMES</span>
				    </h2>
				</div>
			    <div class="quiz-team-name">
			    	<span>1</span> Team w/ short name
			    </div>
			    <div class="quiz-team-name quiz-team-name--coloured">
			    	<span>2</span> Team with a pretty long name
			    </div>
			    <div class="quiz-team-name">
			    	<span>3</span> Team w/ short name
			    </div>
			    <div class="quiz-team-name quiz-team-name--coloured">
			    	<span>4</span> Team with medium name
			    </div>
			    <div class="quiz-team-name">
			    	<span>5</span> Team with very, very, very long two-line name
			    </div>
			</div>
			<div class="large-col-6 worst-team-name">
				<div class="quiz-guide-heading quiz-guide-heading--red">
				    <h2 class="quiz-night-heading">
				        <span>WORST TEAM NAMES</span>
				    </h2>
				</div>
				<div class="quiz-team-name">
			    	<span>1</span> Team w/ short name
			    </div>
			    <div class="quiz-team-name quiz-team-name--coloured">
			    	<span>2</span> Team with a pretty long name
			    </div>
			    <div class="quiz-team-name">
			    	<span>3</span> Team w/ short name
			    </div>
			    <div class="quiz-team-name quiz-team-name--coloured">
			    	<span>4</span> Team with medium name
			    </div>
			    <div class="quiz-team-name">
			    	<span>5</span> Team with very, very, very long two-line name
			    </div>
			</div>
		</div>
	</div>
</div>

{}

BEST TEAM NAMES

1 Team w/ short name

2 Team with a pretty long name

3 Team w/ short name

4 Team with medium name

5 Team with very, very, very long two-line name

WORST TEAM NAMES

1 Team w/ short name

2 Team with a pretty long name

3 Team w/ short name

4 Team with medium name

5 Team with very, very, very long two-line name