I am facing an issue with positioning elements within a div. The layout consists of an image on the left, followed by information on the right (a span, an h3, and another span). My goal is to align the first span at the top, center the h3, and position the other span at the bottom to create a visually appealing arrangement. However, my current setup is not achieving this desired outcome.
Can you identify where the problem lies?
To better understand the issue, you can view an example here: https://jsfiddle.net/ct1ghpk2/2/
HTML:
<div class="item">
<img src="">
<div class="item_info">
<span class="align-t">Span aligned at the top</span>
<h3>Title aligned at the center</h3>
<span class="align-b">Span aligned at the bottom</span>
</div>
<div class="item_separator"></div>
<div class="item_details">
<span>Span aligned at the center</span>
<a href="">Link aligned at the bottom</a>
</div>
</div>
CSS:
.item{
background-color: white;
display: flex;
margin-bottom: 20px;
align-items: flex-start;
padding: 10px;
justify-content: space-between;
height: 10em;
border: 1px solid red;
}
/* Remaining CSS styles */