I'm having trouble positioning my text next to an image. I've tried floating it to the right and even using a flexbox, but nothing seems to be working well. Here is the code I have...
<div class="tab-content">
<div class="tab-pane active" id="tab_default_1">
<h2 class="text-dark-green">Kur Gin</h2>
<p>
<img class="img-responsive" style="height: 40em; width:30em; margin-top:25px; box-shadow: 10px 10px 5px #888888;" src="app/what-we-make/images/KurGin.jpg" alt="" />
</p>
<p>
Our gin, Kur (pronounced "cure") is made in the London Dry Gin style and is produced with Washington heirloom variety red winter wheat that emphasizes a backbone of classic juniper aromas and flavors with subtle citrus (Seville orange) as well as Douglas Fir and Braeburn apples from Mr. Liedholm's backyard.
</p>
</div>
<div class="tab-pane" id="tab_default_2">
<h2 class="text-dark-green">Stark Vatten</h2>
<p>
<img class="img-responsive" style="height:40em; width:30em; margin-top:25px; box-shadow: 10px 10px 5px #888888;" src="app/what-we-make/images/StarkVatten.jpg" alt="" />
</p>
<p>
Our vodka, Stark Vatten (Swedish for “strong water”), is produced with Washington heirloom variety red winter wheat and pure, filtered water to create a clean, viscous, oily vodka that displays a definitive classic European style while remaining a distinctive local product.
</p>
</div>
<div class="tab-pane" id="tab_default_3">
<h2 class="text-dark-green">White Dog Bourbon</h2>
<p>
<img class="img-responsive" style="height:40em; width:30em; margin-top:25px; box-shadow: 10px 10px 5px #888888;" src="app/what-we-make/images/bourbon.jpg" alt="" />
</p>
<p>
Duis autem vel eum iriure dolor in hendrerit in vulputate. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat.
</p>
</div>
</div>
</div>