I currently have a picture, main text, sub text and between them I have a line that separate them as below.

 Picture1    Picture2
Main Text1     Main  
__________     Text2
Sub Text1   _________   
            Sub Text2
            

Everything is inside a div container. Picture and main text are inside a div1 and the line and sub text are inside a div2

The main text will wrapped into second line if the text is getting longer.

My question is how can I make the line & sub text stayed at the same position whether if the main text is 2 lines or 1 line like below.

 Picture1    Picture2
Main Text1     Main  
               Text2
 ________   _________   
Sub Text1   Sub Text2
            

Thank you

CodePudding user response：

Try to use min-height e.g. min-height: 200px; on div1!

CodePudding user response：

You can use flex in flex:

.container {
    display: flex;
}
.container .item{
    border: 1px dotted red;
    width: 200px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}
.container .div2 {
    border-top: 1px solid black;    
}

<div class="container">
    <div class="item">
        <div class="div1">
            <div>image</div>
            maintext
        </div>
        <div class="div2">
            subtext
        </div>
    </div>
    
    <div class="item">
        <div class="div1">
            <div>image</div>
            maintext<br>maintext
        </div>
        <div class="div2">
            subtext
        </div>
    </div>
</div>

<iframe name="sif1" sandbox="allow-forms allow-modals allow-scripts" frameborder="0"></iframe>

CodePudding user response：

Here is a quick example how to do it:

<div style="border: 1px solid red; min-height: 200px; position: relative;">
    <p>Content on top</p>
    <div style="border: 1px dashed blue; position: absolute; bottom: 0; width: 100%;">
        <p>Content @ the bottom!</p>
    </div>
</div>

<iframe name="sif2" sandbox="allow-forms allow-modals allow-scripts" frameborder="0"></iframe>

CodePudding user response：

.table{width:200px ; height: 100px; margin: 50px auto 0 auto;}
.picture1{width: 75px; height: 50px; float: left;padding:0 50px 0 0;font: 15px tahoma;}
.picture2{width: 75px; height: 50px; float: left;font: 15px tahoma;}
.çizgi{ border-bottom: 1px solid #333; margin: 10px 0 0 0;}

<div class="table">
    <div class="picture1">Picture1 Main Text1
        <div class="çizgi"></div>Sub Text 1   
    </div>
    <div class="picture2">Picture2 Main Text2
        <div class="çizgi"></div>Sub Text 2   
    </div>
</div>

<iframe name="sif3" sandbox="allow-forms allow-modals allow-scripts" frameborder="0"></iframe>