Here is an example of my CSS code: https://jsfiddle.net/80e4u0dd/
When you hover over the orange box, the a element gets underlined.
The orange box needs to stay above the "long text" in the green box, just like it is currently.
The issue is that the orange box does not respond to the blue box. I had to use right: 106px as a temporary fix. The orange box should always be positioned over the green box and to the left of the blue box.
.green {
position: relative;
float: left;
left: 0;
top: 0;
white-space: nowrap;
height: 40px;
width: 100%;
background: green;
}
.green a {
display: block;
text-decoration: none;
line-height: 40px;
font-family: Tahoma, Verdana, Segoe, sans-serif;
font-size: 16px;
color: #212121;
}
.green a:hover {
text-decoration: underline;
}
.blue {
position: absolute;
float: right;
right: 0;
top: 0;
width: auto;
height: 100%;
background: blue;
}
.blue p {
margin-right: 5px;
line-height: 40px;
font-family: Tahoma, Verdana, Segoe, sans-serif;
font-size: 16px;
font-weight: bold;
color: #fff;
}
.orange {
position: absolute;
float: right;
right: 106px;
top: 0;
height: 100%;
width: 45px;
background: orange;
}
<div style="width: 400px; height: 100px;">
<div class="green">
<div class="blue">
<p>SHORT TEXT</p>
</div>
<a href="#">
LONG TEXT LONG TEXT LONG TEXT LONG TEXT LONG TEXT LONG TEXT LONG TEXT LONG TEXT LONG TEXT LONG TEXT LONG TEXT LONG TEXT LONG TEXT LONG TEXT LONG TEXT LONG TEXT LONG TEXT LONG TEXT LONG TEXT LONG TEXT LONG TEXT LONG TEXT LONG TEXT LONG TEXT LONG TEXT LONG TEXT LONG TEXT LONG TEXT LONG TEXT LONG TEXT LONG TEXT LONG TEXT LONG TEXT
<span class="orange"></span>
</a>
</div>
</div>