JSFiddle - React, Tailwind, and code Playground
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"/>
The image has fluid height
</div>
</div><!-- End Section2 -->
</div><!-- End column -->
<div class="column clear"><!-- 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"/>
The image has fluid height
</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;
}
.section1 {
}
.section2 {
}
.column .photo {
width:100%;
height:auto;
display:block;
margin:0;
padding:0;
}
.clear {
clear:both;
}