JSFiddle - React, Tailwind, and code Playground

by jnfsmile

HTML

<div class='attachmentRow'>
    <div class='attachmentRowText' style="width:280px;"><span class='attachment-title'>Title</span>

        <br /><span class='attachment-subtitle'>SubTitle</span>

    </div>
    <div id='attach' class='attachFile'>Attach</div>
    <div class='attachedFilename attachment-yesfile' style="display:none;"></div>
 
</div>

CSS

div {
    float: left;
    vertical-align: middle;
}
#attach {
    position: relative;
    z-index: 10;
    font: 12px verdana;
    color: #118cd2;
    width: 160px;
    margin-top: 8px;
    cursor: pointer;
    z-index: 10;
    height: 15px;
}
.attachedFilename
{
    display: block;
width: 160px;
position: relative;
left: -160px;
height: 16px;
overflow: hidden;
margin-right: -160px;
z-index: 1;
}

JavaScript

var asdf = 0;
$("#attach").click(function () {
    $(".attachment-nofile").hide();
    $(".attachment-yesfile").show();
    $(".attachFile").text("Replace").css("margin-top", "16px");
    $(".attachedFilename").text(asdf++);
});