JSFiddle - React, Tailwind, and code Playground

HTML

<div class="main">
    <div class="subfooter">
    <div class="words">
        this is test messgae
        </div>
    
        <ul class="snaps">
        <li><img src="https://encrypted-tbn2.gstatic.com/images?q=tbn:ANd9GcR6HIp-1dv221Es0Hk1E9OuQMzcavdw51paj4T0-zrZfxKgXmUXfA"/></li>
        <li><img src="https://encrypted-tbn2.gstatic.com/images?q=tbn:ANd9GcR6HIp-1dv221Es0Hk1E9OuQMzcavdw51paj4T0-zrZfxKgXmUXfA" /></li> 
        
        <li><img src="https://encrypted-tbn2.gstatic.com/images?q=tbn:ANd9GcR6HIp-1dv221Es0Hk1E9OuQMzcavdw51paj4T0-zrZfxKgXmUXfA"/></li>
        
        <li><img src="https://encrypted-tbn2.gstatic.com/images?q=tbn:ANd9GcR6HIp-1dv221Es0Hk1E9OuQMzcavdw51paj4T0-zrZfxKgXmUXfA" /></li>
         
        </ul>
    </div>
 
 </div>

CSS

@charset "utf-8";
.main {
	width: 100%;
	height: auto;
	float: left;
	display: inline-block;
	position: relative;
}

.subfooter {
	width: 100%;
	background-color: #99CC66;
	margin-top: 0px;
	margin-right: 0px;
	margin-bottom: 0px;
	margin-left: 0px;
	float: left;
	display: block;
}

.words {
	float: left;
	width: 45%;
	display: inline-block;
	background-color: #996633;
	padding-left: 20px;
	padding-right: 20px;
	margin-left: 50px;
}
.snaps li {
	width: auto;
	float: left;
	display: block;
	padding-top: 5px;
	padding-right: 5px;
	padding-bottom: 5px;
	padding-left: 5px;
}
.snaps li img {
width:200px;
}
.snaps {
	width: 45%;
	margin-top: 0px;
	margin-right: 0px;
	margin-bottom: 0px;
	margin-left: 0px;
	float: left;
	display: inline-block;
	list-style-type: none;
}