JSFiddle - React, Tailwind, and code Playground

HTML

<ul id="mediaList">
    <li>
        <img src="test.png" />
        <h2>One -  average title is here</h2>
        <h3><a href="link 1">Link is here  and this might be long also</a></h3>
    </li>
    <li>
        <img src="test.png" />
        <h2>Two - this title is here and is really, really long</h2>
        <h3><a href="link 1">Link is here </a></h3>
    </li>
    <li>
        <img src="test.png" />
        <h2>Threee -title is here</h2>
        <h3><a href="link 1">Link is here </a></h3>
    </li>
    <li>
        <img src="test.png" />
        <h2>Four - this title is here and is really, really long</h2>
        <h3><a href="link 1">Link is here </a></h3>
    </li>
    <li>
        <img src="test.png" />
        <h2>Five title is here</h2>
        <h3><a href="link 1">Link is here </a></h3>
    </li>
    <li>
        <img src="test.png" />
        <h2>Six title is here</h2>
        <h3><a href="link 1">Link is here and this area can be long also </a></h3>
    </li>    
    
    
</ul>

CSS

*{
    margin: 0px;
    padding: 0px;
}

html, body{
    width: 100%;
}

li{
    width: 40%;
    vertical-align: top;
    
}

@media screen and (max-width: 480px){
    li{
        width: 80%;
    }    
}

ul,li { 
    padding: 0; 
    margin: 0; 
}

#mediaList {  
    font-size: 0; 
    text-align: center;
}

#mediaList li { 
    font-size: 12px; 
    display: inline-block; 
    border: 1px solid #000000; 
    padding: 2px;  
    background: #c0c0c0; 
    margin: 5px; 
}

#mediaList li h2 { 
    font-size: 1em; 
}