Align an pin it button with text (both vertically & horizontally)

Question

I am stumped and am hoping for a bit of help.

I'd like to align a Pin It Button with some text, with enough space between the two so it looks nice. Then I'd like to have horizontal and vertical lines surrounding the button and text.

In a previous question someone helped me with the code in fiddle .. although when I transfer it to my website , it isn't working

Thanks so much in advance, Alison

Code:

<div class="recipesharing">
<div>

<a href="https://www.pinterest.com/pin/create/button/" data-pin-do="buttonBookmark" data-pin-tall="true" data-pin-round="true" data-pin-save="false"><img src="//assets.pinterest.com/images/pidgets/pinit_fg_en_round_red_32.png" /></a><p.id>Pin For Later</p.id>
</div>
</div>

CSS

div.recipesharing {
    border-bottom: 2px solid rgb(247, 247, 247);
   border-top: 2px solid rgb(247, 247, 247);
   width: 600px;
   height: 60px;
}

div.pintherecipe {
  display: inline-block;
}

p.id {
    display: inline;
    padding-right: 100px;
    line-height:150px;
}

img {vertical-align: middle;margin-right:5px;}

Answer 1

This has nothing to do with jQuery.

Anyway, the code on JSFiddle differs from the one at the site.

JSFiddle:

<div class="recipesharing">
  <div>
  <a href="https://www.pinterest.com/pin/create/button/" data-pin-do="buttonBookmark" data-pin-tall="true" data-pin-round="true" data-pin-save="false">
    <img src="//assets.pinterest.com/images/pidgets/pinit_fg_en_round_red_32.png" />
  </a>
  <p.id>Pin For Later</p.id>
  </div>
</div>

Website:

<div class="recipesharing">
  <div>
    <p>
      <span class="PIN_1467591127309_button_pin PIN_1467591127309_round PIN_1467591127309_tall" data-pin-log="button_pinit_bookmarklet" data-pin-href="https://www.pinterest.com/pin/create/button/"></span>
      Pin For Later
    </p>
  </div>
</div>

This is not all, though. This isn't valid:

<p.id>Pin For Later</p.id>

I'm sure you actually meant (judging by your CSS code):

<p class="id">Pin For Later</p>

Also, I removed "line-height: 150px," because it messed with the design.

This is how it looked after I had changed the code at the site to the one at JSFiddle (the corrected one): [screenshot link] . The only difference between it and the example at JSFiddle seems to be the font, which is easy to fix (if you even want a sans-serif font at the website).