How to have two inline divs on one line but make on expand responsively and push all the other content down

user_13516162 0
Viewed 24

I want repeated rows of 2 divs. In each row one div will contain an image and the second will contain a description. I want each pair of divs to remain on the same line and aligned at the top always. But as the screen is shrunk, the second div will expand vertically to accomodate the text with less width. As this happens I would like all other rows of div-pairs to get pushed down so they remain aligned at the top also.

It seems so simple but I cant do it, an explanation of what I am missing and a solution would be fantastic.

Here's my code so far:

CSS:

<style>
.container{  
width: auto;
height: auto;
border: solid 1px blueviolet;  
}

.photo-box{
display: inline-block;
vertical-align: top;
width:150px;
height:150px;
border:solid 1px red;
}

.details-box{
display: inline-block;
vertical-align: top;
width:auto;
height:auto;
min-height:150px;
min-width: 100px; 
border:solid 1px black; 
}
</style>

HTML:

<html>
    <div class="container">
        <div class="photo-box"></div>
        <div class="details-box">
            <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. 
            Earum veritatis suscipit beatae sed aut illum similique 
            porro a molestias. Lorem ipsum dolor sit amet consectetur adipisicing elit. 
            Suscipit cupiditate voluptatum aspernatur ad cum voluptates dolorum 
            quo reprehenderit ut fugiat? Praesentium id maxime libero ut culpa
             neque dignissimos nulla dolorem.
             Lorem ipsum dolor sit amet consectetur adipisicing elit. 
             Earum veritatis suscipit beatae sed aut illum similique 
             porro a molestias. Lorem ipsum dolor sit amet consectetur adipisicing elit. 
             Suscipit cupiditate voluptatum aspernatur ad cum voluptates dolorum 
             quo reprehenderit ut fugiat? Praesentium id maxime libero ut culpa
              neque dignissimos nulla dolorem.</p>
        </div>
    </div>

    <br>

    <div class="container">
    <div class="photo-box">
    </div>
    <div class="details-box">
        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. 
            Earum veritatis suscipit beatae sed aut illum similique 
            porro a molestias. Lorem ipsum dolor sit amet consectetur adipisicing elit. 
            Suscipit cupiditate voluptatum aspernatur ad cum voluptates dolorum 
            quo reprehenderit ut fugiat? Praesentium id maxime libero ut culpa
             neque dignissimos nulla dolorem.
             Lorem ipsum dolor sit amet consectetur adipisicing elit. 
             Earum veritatis suscipit beatae sed aut illum similique 
             porro a molestias. Lorem ipsum dolor sit amet consectetur adipisicing elit. 
             Suscipit cupiditate voluptatum aspernatur ad cum voluptates dolorum 
             quo reprehenderit ut fugiat? Praesentium id maxime libero ut culpa
              neque dignissimos nulla dolorem.</p>
    </div>
    </div>
</html>

This is what I am trying to achieve:

enter image description here

css html
1 Answers

Here try this by making your widths 49%, makeing them flex boxes and floating left the photo box. 

<style>
.container{  
border: solid 1px blueviolet;  
}

.photo-box{
display: flex;
vertical-align: top;
min-height:150px;
min-width: 100px; 
border:solid 1px red;
width: 49%;
float: left;
}

.details-box{
display: flex;
vertical-align: top;
min-height:150px;
min-width: 100px; 
border:solid 1px black; 
width: 49%;
}
</style>
<html>
    <div class="container">
        <div class="photo-box"></div>
        <div class="details-box">
            <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. 
            Earum veritatis suscipit beatae sed aut illum similique 
            porro a molestias. Lorem ipsum dolor sit amet consectetur adipisicing elit. 
            Suscipit cupiditate voluptatum aspernatur ad cum voluptates dolorum 
            quo reprehenderit ut fugiat? Praesentium id maxime libero ut culpa
             neque dignissimos nulla dolorem.
             Lorem ipsum dolor sit amet consectetur adipisicing elit. 
             Earum veritatis suscipit beatae sed aut illum similique 
             porro a molestias. Lorem ipsum dolor sit amet consectetur adipisicing elit. 
             Suscipit cupiditate voluptatum aspernatur ad cum voluptates dolorum 
             quo reprehenderit ut fugiat? Praesentium id maxime libero ut culpa
              neque dignissimos nulla dolorem.</p>
        </div>
    </div>

    <br>

    <div class="container">
    <div class="photo-box">
    </div>
    <div class="details-box">
        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. 
            Earum veritatis suscipit beatae sed aut illum similique 
            porro a molestias. Lorem ipsum dolor sit amet consectetur adipisicing elit. 
            Suscipit cupiditate voluptatum aspernatur ad cum voluptates dolorum 
            quo reprehenderit ut fugiat? Praesentium id maxime libero ut culpa
             neque dignissimos nulla dolorem.
             Lorem ipsum dolor sit amet consectetur adipisicing elit. 
             Earum veritatis suscipit beatae sed aut illum similique 
             porro a molestias. Lorem ipsum dolor sit amet consectetur adipisicing elit. 
             Suscipit cupiditate voluptatum aspernatur ad cum voluptates dolorum 
             quo reprehenderit ut fugiat? Praesentium id maxime libero ut culpa
              neque dignissimos nulla dolorem.</p>
    </div>
    </div>
</html>

user_111111190
Related