JSFiddle - React, Tailwind, and code Playground

HTML

<div id="original">
元のSNSボタンとか
<div id="sns">
    <div class="twitter">
        <a href="#test1">tweet</a>
    </div>
    <div class="gplus">
        <a href="#test2">+1</a>
    </div>
    <div class="facebook">
        <a href="#test3">いぃーね</a>
    </div>
</div>
    <span>ホバーで各リンク確認して見て下さい(ブラウザの表示で)。リンクはダミーです</span>
</div>
<hr>
<div id="test">
    <div class="res1">
        <div class="title">タイトル: X</div>
        <div class="name">名前: AAAAAA</div>
        <div class="date">2015/05/21</div>
        <div class="comment">ああああああああああああああああああああああああああああああああああああああああ</div>
    </div>
    <div class="res2">
        <div class="title">タイトル: Y</div>
        <div class="name">名前: BBBBBB</div>
        <div class="date">2015/05/21</div>
        <div class="comment">いいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいい</div>
    </div>
    <div class="res3">
        <div class="title">タイトル: Z</div>
        <div class="name">名前: CCCCCC</div>
        <div class="date">2015/05/21</div>
        <div class="comment">うううううううううううううううううううううううううううううううううううううううう</div>
    </div>
    <div class="res4">
        <div class="title">タイトル: V</div>
        <div class="name">名前: DDDDDD</div>
        <div class="date">2015/05/21</div>
        <div class="comment">ええええええええええええええええええええええええええええええええええええええええ</div>
    </div>
    <div class="res5">
        <div class="title">タイトル: W</div>
        <div class="name">名前: EEEEEE</div>
        <div class="date">2015/05/21</div>
        <div class="comment">おおおおおおおおおおおおおおおおおおおおおおおおおおおおおおおおおおおおおおおお</div>
    </div>
</div>

CSS

body {
    margin: 4px;
    
}

#test {
    display: flex;
    flex-flow: column wrap;
    justify-content: space-between;
}

hr {
    clear:both;
    margin: 20px 0;
}

#original {
    text-align: center;
}

#sns {
    border: 1px solid #ddd;
    width: 200px;
    background-color: #003;
    padding: 6px;
    margin: 0 0 10px;
    
    display: flex;
    flex-flow: row wrap;
    justify-content: space-around;
}

#original #sns {
    margin: 0 auto 10px;
}
#original span {
    font-size: 0.825rem;
}

#sns a:link {
    color: #ccc;
}


#sns .twitter, .gplus, .facebook {
    flex: 1 auto;
    min-width: 4em;
    text-align: center;
}

div[class^="res"]{
    display: flex;
    flex-flow: row wrap;
    justify-content: space-between;
}

.title, .name, .date {
    flex: 1 auto;
}

.name, .date {
    margin: 0 0 0 10px;
}

.comment {
    flex: 1 100%;
    margin: 10px 5px 20px
}

JavaScript

var sns = $("#sns").clone();
$("#test").children().before(sns);