I am currently working on designing a layout where clicking on "See More" will expand the text within one container while keeping the surrounding containers in place.
There are three containers, each containing two wrappers - a top wrapper with the title and a bottom wrapper with the image, text, and button. Since I do not know the length of the titles in advance, I have used justify-content: space-between to ensure that the boxes, text, and buttons align properly by making the bottom wrappers always line up.
The problem arises after clicking "See More," causing the bottom wrapper of each container to move down to accommodate the increased height.
.main-container {
display: flex;
flex-direction: row;
}
.container {
display: flex;
flex-direction: column;
justify-content: space-between;
}
.top-wrapper {
display: flex;
flex-direction: column;
height: 100%;
}
.bottom-wrapper {
display: flex;
flex-direction: column;
justify-content: space-between;
} <div class="main-container">
<div class="container">
<div class="top-wrapper">
<div class="title">
TITLE 1 IS LONG THAT IT GOES TO NEXT LINE
</div>
</div>
<div class="bottom-wrapper">
<div class="image-text-wrapper">
<div class="image-container">
<img class="image" src="https://dummyimage.com/200x200/000/000">
</div>
<div class=“text” id="text">
{{ text }}
//See More code
</div>
</div>
<button>
BUTTON 1
</button>
</div>
</div>
<div class="container">
//second container code
<div>
<div class="container">
//third container code
<div>
</div>
Do you think using a table would be more suitable for this situation, or is there a simple CSS solution available?
You can access the complete code here: Plunkr