JSFiddle - React, Tailwind, and code Playground

by someprimetime

HTML

<div id="prospect-status-container">
    <!-- Removed From Project Success Message -->
    <div class="prospect-status-removed-success">Removed from Project Name</div>
    <!-- Prospect Status -->
    <div class="prospect-status-row">
        <!-- Project Name -->
        <label>Project:</label> <span class="prospect-status-project">
            <a href="#">Q3 Product Managers</a>
            <a class="prospect-status-project-remove" href="#">Remove from project</a></span>

    </div>
    <div class="prospect-status-row">
        <!-- Status Dropdown -->
        <label>Status:</label>
        <span class="prospect-status-activity-date">
            Today
        </span>
    </div>
</div>

SCSS

#prospect-status-container {
    &:after {
        	content: ".";
	display: block;
	clear: both;
	visibility: hidden;
	line-height: 0;
	height: 0;
}
  border: 1px solid red;
    label {
        float: left;
        display: block;
        clear:left;
    }
    .prospect-status-removed-success {
        background: #d6ecbd;
        color: #060;
    }
    .prospect-status-row {
        .prospect-status-project:hover {
            > .prospect-status-project-remove {
                visibility: visible!important;
            }
        }
        .prospect-status-project-remove {
            visibility: hidden;
        }
    }
    .prospect-status-activity-date {
        color: #999;
    }
}