proof-of-concept.html

<hr/>
<div class="forumpost-cardguide-fancy">

<div class="alignedcard-left">[cardimg size=180]Wisp[/cardimg]</div>
<h3>Illidan Stormrage</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec fringilla aliquam dignissim. In imperdiet quam turpis, sit amet viverra purus egestas sed. Phasellus vel diam dui. Etiam sit amet felis vel urna aliquam dignissim. Praesent condimentum a lectus a lobortis. Proin in eleifend leo. Mauris vitae felis quis nisl gravida blandit. Curabitur mollis pretium turpis non hendrerit. Sed laoreet tristique odio, venenatis gravida mauris ultricies id.</p>

<p>Nullam volutpat arcu odio, at dignissim dui tincidunt id. Fusce imperdiet nisl vitae ante convallis laoreet. Donec placerat turpis in dolor vestibulum pellentesque vel vitae lectus. Aliquam maximus lobortis finibus. Phasellus efficitur cursus scelerisque. Aliquam erat volutpat. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae;</p>

<hr/>

<div class="alignedcard-right">[cardimg size=180]Illidan Stormrage[/cardimg]</div>
<h3>Illidan Stormrage</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec fringilla aliquam dignissim. In imperdiet quam turpis, sit amet viverra purus egestas sed. Phasellus vel diam dui. Etiam sit amet felis vel urna aliquam dignissim. Praesent condimentum a lectus a lobortis. Proin in eleifend leo. Mauris vitae felis quis nisl gravida blandit. Curabitur mollis pretium turpis non hendrerit. Sed laoreet tristique odio, venenatis gravida mauris ultricies id.</p>

<p>Nullam volutpat arcu odio, at dignissim dui tincidunt id. Fusce imperdiet nisl vitae ante convallis laoreet. Donec placerat turpis in dolor vestibulum pellentesque vel vitae lectus. Aliquam maximus lobortis finibus. Phasellus efficitur cursus scelerisque. Aliquam erat volutpat. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae;</p>
</div>

style.css

.forumpost-cardguide-fancy:after {
    content: "";
    display: table;
    clear: both;
}

.forumpost-cardguide-fancy .alignedcard-right {
    float: right;
}

.forumpost-cardguide-fancy .alignedcard-left {
    float: left;
}

template-left-aligned-card.html

<hr/>
<div class="forumpost-cardguide-fancy">
  <div class="alignedcard-left">[cardimg size=180]The Card Name Here[/cardimg]</div>
  <h3>Section heading</h3>
  <p>Paragraphs of content</p>
  <p>Paragraphs of content</p>
  <p>Paragraphs of content</p>
</div>

template-right-aligned-card.html

<hr/>
<div class="forumpost-cardguide-fancy">
  <div class="alignedcard-right">[cardimg size=180]The Card Name Here[/cardimg]</div>
  <h3>Section heading</h3>
  <p>Paragraphs of content</p>
  <p>Paragraphs of content</p>
  <p>Paragraphs of content</p>
</div>