JSFiddle - React, Tailwind, and code Playground

by thirtydot

HTML

<div class="wrap"><!-- wrap -->
    
    <div class="column"><!-- Start column -->
        
        <div class="section1"><!-- Start Section1 -->
            
            <div class="link"><!-- Start Link -->
                <p>This is a link and a text found in "section1".</p>
            </div><!-- End Link -->
            
            <div class="text">
                <p>How to make the link and text display under the div which contains the image?</p>
            </div>
       
        </div><!-- End Section1 -->
        
        <div class="section2"><!-- Start Section2 -->             
            <div class="photo"><!-- Start Photo -->                  <img src="http://www.kevinboulanger.net/imagestb/treetimelapse3.jpg" class="photo"/>
            </div>
       
        </div><!-- End Section2 -->  
    
    </div><!-- End column -->    
    
    
    
    
    
    <div class="column"><!-- Start column -->
        
        <div class="section1"><!-- Start Section1 -->
            
            <div class="link"><!-- Start Link -->
                <p>This is a link and a text found in "section1".</p>
            </div><!-- End Link -->
            
            <div class="text">
                <p>How to make the link and text display under the div which contains the image?</p>
            </div>
       
        </div><!-- End Section1 -->
        
        <div class="section2"><!-- Start Section2 -->             
            <div class="photo"><!-- Start Photo -->                 <img src="http://www.kevinboulanger.net/imagestb/treetimelapse3.jpg" class="photo"/>
            </div>
       
        </div><!-- End Section2 -->  
    
    </div><!-- End column -->

CSS

body {
background-color:#FFF;
font-family:Verdana, Geneva, sans-serif;
font-size:1em;
color:#FF2E2E;
margin:0;
padding:0
}
.wrap {
min-width:960px; 
padding:0 2%
}
.column {
width:23.5%;
float:left;
padding-bottom:2%;
position:relative;
}
.section1, .section2 {
border:1px solid #555;
}

.column {
    display: table;
}
.section1 {
    display: table-footer-group;
}
.section2 {
    display: table-row-group;
}

.section2 {
}

.column .photo {
width:100%;
height:auto;
display:block;
margin:0;
padding:0;
}