Make whole part hoverable and clickable - html

Question

When you hover over the image, both the image and the part where the text is is clickable. Also the part of the text highlights red, thats great. When you hover over the text, also the text background area changes to red and the text part and the image part is clickable. What I want is that when you hover over the image that the WHOLE part of the text-area and the white area under the text-area is hoverable/clickable (so that white part right next to the image, the rectangular block that has the full height of the image and the full width of the text-area). Is that possible to make the whole rectangular block hoverable/clickable (and not just that text-area block)?
.well.sb:hover {
color: #FFF;
background-color: #A10000;
text-decoration: none;
-moz-transition: .6s ease-in-out;
-webkit-transition: .6s ease-in-out;
-o-transition: .6s ease-in-out;
-ms-transition: .6s ease-in-out;
transition: .6s ease-in-out;
}
.well.sb:hover div {
color:#FFF;
text-decoration:none;
-moz-transition: .6s ease-in-out;
-webkit-transition: .6s ease-in-out;
-o-transition: .6s ease-in-out;
-ms-transition: .6s ease-in-out;
transition: .6s ease-in-out;
}
.well.sb {
background-color: #FFF;
text-align: left;
padding: 0;
border: none;
border-bottom: 1px solid #e3e3e3;
text-decoration: none;
-moz-transition: .6s ease-in-out;
-webkit-transition: .6s ease-in-out;
-o-transition: .6s ease-in-out;
-ms-transition: .6s ease-in-out;
transition: .6s ease-in-out;
}
.article-image img {
width: 40%;
height: auto;
margin-right: 10px;
margin-top: 0px;
float:left;
}
<div class="well sb">
<div>
<a href="#">
<div class="article-image">
<img alt="#" src="http://lorempixel.com/100/100">
<div class="tag">
TAG
</div>
<div class="title">
TITLE
</div>
</div></a>
</div>
</div>

Answer 1

Something like this?
A solution using flexbox
.well.sb:hover {
color: #FFF;
background-color: #A10000;
text-decoration: none;
-moz-transition: .6s ease-in-out;
-webkit-transition: .6s ease-in-out;
-o-transition: .6s ease-in-out;
-ms-transition: .6s ease-in-out;
transition: .6s ease-in-out;
}
.well.sb:hover div {
color: #FFF;
text-decoration: none;
-moz-transition: .6s ease-in-out;
-webkit-transition: .6s ease-in-out;
-o-transition: .6s ease-in-out;
-ms-transition: .6s ease-in-out;
transition: .6s ease-in-out;
}
.well.sb {
background-color: #FFF;
text-align: left;
padding: 0;
border: none;
border-bottom: 1px solid #e3e3e3;
text-decoration: none;
-moz-transition: .6s ease-in-out;
-webkit-transition: .6s ease-in-out;
-o-transition: .6s ease-in-out;
-ms-transition: .6s ease-in-out;
transition: .6s ease-in-out;
}
.well.sb a {
display: flex;
}
.well.sb .article-image {
width: 40%;
margin-right: 10px;
}
.well.sb .article-image img {
width: 100%;
height: auto;
}
<div class="well sb">
<a href="#">
<div class="article-image">
<img alt="#" src="http://lorempixel.com/100/100">
</div>
<div class="txt">
<div class="tag">
TAG
</div>
<div class="title">
TITLE
</div>
</div>
</a>
</div>

Answer 2

The float:left needs to be followed by a clear:both for its parent to compute the height of the floated contents. Add the following css
.article-image:after{
content: '';
clear: both;
display:block;
}
.well.sb:hover {
color: #FFF;
background-color: #A10000;
text-decoration: none;
-moz-transition: .6s ease-in-out;
-webkit-transition: .6s ease-in-out;
-o-transition: .6s ease-in-out;
-ms-transition: .6s ease-in-out;
transition: .6s ease-in-out;
}
.well.sb:hover div {
color:#FFF;
text-decoration:none;
-moz-transition: .6s ease-in-out;
-webkit-transition: .6s ease-in-out;
-o-transition: .6s ease-in-out;
-ms-transition: .6s ease-in-out;
transition: .6s ease-in-out;
}
.well.sb {
background-color: #FFF;
text-align: left;
padding: 0;
border: none;
border-bottom: 1px solid #e3e3e3;
text-decoration: none;
-moz-transition: .6s ease-in-out;
-webkit-transition: .6s ease-in-out;
-o-transition: .6s ease-in-out;
-ms-transition: .6s ease-in-out;
transition: .6s ease-in-out;
}
.article-image img {
width: 40%;
height: auto;
margin-right: 10px;
margin-top: 0px;
float:left;
}
.article-image:after{
content: '';
clear: both;
display:block;
}
<div class="well sb">
<div>
<a href="#">
<div class="article-image">
<img alt="#" src="http://lorempixel.com/100/100">
<div class="tag">
TAG
</div>
<div class="title">
TITLE
</div>
</div></a>
</div>
</div>