JSFiddle - React, Tailwind, and code Playground

by Stephen

HTML

<p>
    Widen this <em>Result</em> pane until "This is My Packet"
    and the buttons are next to each other.
</p>
<ol>
    <li class="file selectable" data-pkid="3271">
        <div class="file entry">
            <span class="packet documentname">This is My Packet</span>
            <span class="buttons">
                <button name="edit" class="edit" value="3271"
                        title="Edit &quot;This is My Packet&quot;"><span class="btnLabel">Edit</span></button>
                <button name="delete" class="delete" value="3271"
                        title="Delete &quot;This is My Packet&quot;"><span class="btnLabel">Delete</span></button>
                <button name="duplicate" class="duplicate" value="3271"
                        title="Make a copy of &quot;This is My Packet&quot;"><span class="btnLabel">Duplicate</span></button>
                <button name="rename" class="rename" value="3271"
                        title="Change the name of &quot;This is My Packet&quot;"><span class="btnLabel">Rename</span></button>
            </span>
            <span class="preview">
                <a href="#/packet/preview/3271"
                   title="See a Preview of your packet &quot;This is My Packet&quot;">Preview <em>&ldquo;This is My Packet&rdquo;</em></a>
            </span>
            <span class="timestamps">
                <span class="ctime" data-ctime="1432246797000">May 21 at 3:19 PM</span>
                <span class="mtime" data-mtime="1432246797000">May 21 at 3:19 PM</span>
            </span>
        </div>
    </li>
</ol>

CSS

/* See the critical pieces further down. */
body {
    font-family: Verdana,Geneva,'Lucida Grande',Helvetica,sans-serif;
}
p {
    font-size: 85%;
    margin-top: 2.5em;
}
 ol {
    list-style-type: none;
    font-size: 75%;
    padding-left: 0;
}
ol > li:hover {
    background-color: #f0fff2;
}
.file.entry {
    max-width: 80%;
}
.documentname {
    color: #92453C;
    font-weight: bold;
}
.preview {
    display: inline-block;
    float: right;
}
.timestamps {
    display: block;
    clear: both;
    font-size: smaller;
}
.timestamps .ctime::before {
    content:"created: ";
}
.timestamps .mtime::before {
    content:"— modified: ";
}
span.packet {
    display: inline-block;
    padding: 0.5em 0;
    vertical-align: bottom;
}
/*  Here's where the critical pieces start  */
 span.buttons {
    position: relative;
    display: inline-block;
    visibility: hidden;
    /* normally appears only on hover, but keeping it visible for this demo */
    /*visibility:visible;*/
    background-color: #b2bdcf;
    padding: 4px 0.5em;
    margin-left: 2em;
    margin-bottom: 0.25em;
    box-shadow: 2px 2px 8px #555;
}
span.buttons:after {
    content :' ';
    display : block;
    position : absolute;
    left: -18px;
    top : 0;
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 13px 18px 13px 0px;
    border-color: transparent;
    border-right-color: #b2bdcf;
}
li:hover span.buttons {
    visibility: visible;
}