JSFiddle - React, Tailwind, and code Playground
HTML
<div id="design01">
<div id="titledesign01">Title</div>
<ul>
<li>
<div id="designphoto01"><img src="http://www.emocool.com/work/01.jpg" ></div>
</li>
<li>
<div id="designphoto04"><img src="http://www.emocool.com/work/03.jpg" ></div>
</li>
</ul></div>
CSS
#design01 {
display: block;
position: relative;
max-width: 100%;
margin: 0 auto;
float:left;
}
#design01 ul {
float:left;
overflow:hidden;
max-width: 100%;
height:100%;
list-style:none;
padding:0px;
padding:0px;
}
#design01 ul li{
float:left;
position:relative;
padding:0px;
width:50%;
margin:0;
}
#titledesign01 {
max-width: 100%;
font: 18px/20px "HelvBold", Helvetica, Arial, sans-serif;
text-transform: uppercase;
color:#fff;
margin-left:20px;
}
#designphoto04 {
display: block;
max-width: 100%;
}
#designphoto04 img{
max-width: 100%
}
#designphoto01 {
display: block;
max-width: 100%;
}
#designphoto01 img{
max-width: 100%
}