<div class="item-list">
<div class="item">
<picture>
<img alt="flower" src="https://hips.hearstapps.com/hmg-prod/images/surprising-flower-meanings-balloon-flowers-1650767465.jpg?crop=1xw:1xh;center,top&resize=980:*" />
</picture>
<div class="info">
<div class="details">
<a href="#foo">Text text text</a>
<p>More text to read</p>
</div>
<div class="item-action-btns">
<button>I am button</button>
<button>more button</button>
</div>
</div>
</div>
</div>
<style>
:root {
--lightgray: #F7F7F7;
--gray: #e6e6e6;
--black: #272727;
--shadow-sm: 0 1px 6px -1px rgb(0 0 0 / 0.1), 0 2px 6px -2px rgb(0 0 0 / 0.1);
--shadow-md: 10px 0px 10px -10px rgba(128, 128, 128, 0.5), -10px 0px 10px -10px rgba(128, 128, 128, 0.5);
--rounded-sm: 5px;
--rounded-md: 8px;
}
.item-list {
display: flex;
flex-direction: column;
gap: 1rem;
margin-block: 1rem;
}