While I understand this is a common question, I am still facing difficulties even after reading similar queries.
In my situation, I have two divs (one with a variable height text box paragraph and the other with a fixed height image) within a container div, set up as shown below:
<div class="error-row row">
<div class="error-value-col">
<p class="error-value">{{error.message}}</p>
</div>
<a class="cross-link">
<img class="cross" src="/assets/cross.png" alt="close">
</a>
</div>
This snippet of LESS code accompanies the HTML structure:
.error-row {
border: 1px solid @po-yellow;
border-width: 0px 1px 1px 1px;
box-sizing: border-box;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
position: relative;
margin: 0px;
.error-value-col {
float:left;
vertical-align: middle;
display: inline-block;
width: calc(~'100% - 70px');
.error-value {
font-size: 10px;
padding: 5px;
p {
margin-bottom: 0px;
}
}
}
.cross-link {
padding: 0px;
float: right;
vertical-align: middle;
display: inline-block;
height: 70px;
img.cross {
margin: auto;
width: 70px;
height: 70px;
padding: 28.5px 27.5px 26.5px 27.5px;
color: black;
}
}
}
I have experimented with various configurations but none seem to be effective. My goal is to align the element with the smaller height next to the taller element in the center.
Thank you for any assistance provided.
EDIT: To clarify...I aim to center the error-value-col and cross-link elements inside the error-row container. This container will adjust its size based on the larger of the two elements, which could vary.