JSFiddle - React, Tailwind, and code Playground

HTML

<body>
	<div id="result">
        
		<div class="link-div">
            
			<div class="content clearfix">
				<a href="#">Some text here and there</a>
				<span>11/11/11</span>
			</div>
            
			<div class="link-controls clearfix">
                
				<a href="#" class="tag">Tag</a>
				<a href="#" class="tag">Tag</a>
				<a href="#" class="tag">Tag</a>
				<div class = "edit-delete">
					<button>Edit</button>
					<button>Delete</button>
				</div>
                
			</div><!-- end .link-controls -->
            
		</div> <!-- end .link-div -->
        
	</div><!-- end result -->
</body>

CSS

body, button, a {
    font-family:'Raleway', Helvetica;
    font-weight: 300;
    color: #555;
}
a {
    text-decoration: none;
}
#result {
    max-width: 1000px;
    margin: 60px auto;
    border: 1px solid #555;
}
.link-div {
    padding: 10px;
}
div.link-div div.content a {
    float: left;
}
div.link-div div.content span {
    float: right;
}
div.link-div div.link-controls {
    background-color: #ecf0f1;
}
div.link-div div.edit-delete {
    display: inline;
    float: right;
    background-color: #2ecc71;
}
.clearfix:after {
    content:".";
    visibility: hidden;
    height: 0;
    display: block;
    clear: both;
}
@media screen and (max-width: 500px) {
    div.link-div div.content a {
        float: none
    }
    div.link-div div.content span {
        float: none;
        display: block;
    }
    div.link-div div.edit-delete {
        display: block;
        float: none;
        text-align: center
    }
    .clearfix:after {
        /* remove the clearfix */
        content: none;
        visibility: hidden;
        height: 0;
        display: block;
        clear: both;
    }
}