JSFiddle - React, Tailwind, and code Playground

by Christopher Stephens

HTML

<div class="some-single-line-thingy one">
    Without containg divs
    <a href="#" class="button">
        <span class="button-content star-iconified-button">
            some facebook button
        </span>
    </a>
    needs the button to be a block element (preffered)
</div>

<div class="some-single-line-thingy two">
    Without containg divs
    <a href="#" class="button">
        <span class="button-content star-iconified-button">
            some facebook button
        </span>
    </a>
    inconsistent white space treatment on forn and behind button. aka newline on line 12 matters
    </div>
    
<div class="some-single-line-thingy three">
    <div>uses containers for all elements</div>
    <a href="#" class="button">
        <span class="button-content star-iconified-button">
            some facebook button
        </span>
    </a>
    <div>elements all get consistent whitespace treatment but is bloated</div>
</div>

CSS

div.some-single-line-thingy{
    white-space:nowrap;
    margin:10px 0;
}
div.some-single-line-thingy{
    white-space:nowrap;
}
a.button:hover{
    background-image: -webkit-linear-gradient(bottom, black 10%, white 50%);
    background-image: -moz-linear-gradient(bottom, black 10%, white 50%);
}
/* or better yet use a font set of icons if you have them*/
.star-iconified-button{
    background-image: url('http://skyroomnyc.com/images/f_logo.jpg');
    background-repeat:no-repeat;
    background-position:center left;
    /*icon is 20px with a 5px right padding*/
    padding-left:25px;
}
a.button{
    text-decoration:none;
    padding:5px;
    color:black;
    border:1px solid #000;
    background-image: -webkit-linear-gradient(bottom, black 1%, white 64%);
    background-image: -moz-linear-gradient(bottom, black 1%, white 64%);
}
div.some-single-line-thingy.one a.button{
    /*
        This is important so that whitespace(new lines in the markup)
        are consistent with its peers
    */
    display:inline-block;
}
div.some-single-line-thingy.two a.button{
    margin:0 3px;
}
div.some-single-line-thingy.three > *{
    display:inline-block;
}