JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="http://meyerweb.com/eric/tools/css/reset/reset200802.css">
<ul>
    <li>
        <div>
            Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmo
        </div>
    </li>
    <li>
        <div>
            Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
            tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
            quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
        </div>
    </li>
    <li>
        <div>
            Lorem ipsum dolor sit amet, consectetur adipisicing elit. Labore, ea.
        </div>
    </li>
    <li>
        <div>
            Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
            tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
            quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
        </div>
    </li>
    <li>
        <div>
            Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
            tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
        </div>
    </li>
    <li>
        <div>
            Lorem ipsum dolor sit amet, consectetur adipisicing elit. Labore, ea.
        </div>
    </li>
</ul>

CSS

/* http://meyerweb.com/eric/tools/css/reset/ */
/* v1.0 | 20080212 */

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
	margin: 0;
	padding: 0;
	border: 0;
	outline: 0;
	font-size: 100%;
	vertical-align: baseline;
	background: transparent;
}
body {
	line-height: 1;
}
ol, ul {
	list-style: none;
}
blockquote, q {
	quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: '';
	content: none;
}

/* remember to define focus styles! */
:focus {
	outline: 0;
}

/* remember to highlight inserts somehow! */
ins {
	text-decoration: none;
}
del {
	text-decoration: line-through;
}

/* tables still need 'cellspacing="0"' in the markup */
table {
	border-collapse: collapse;
	border-spacing: 0;
}

li {
	cursor: pointer;
  box-sizing: border-box;
	background-color: #00C2F7;
	border: 2px solid #EAEAEA;
	height: 100px;
	width: 30vw;
	float: left;
	margin-top: 5vw;
	margin-right: 5vw;
	align-items: stretch;
}

li:nth-of-type(3n) {
	margin-right: 0;
}

li > div {
	display: none;
}
ul > div {
  box-sizing: border-box;
	line-height: 22px;
	width: 100vw;
	background: #EBEBEB;
	margin-top: 5vh;
	padding: 2vh 4vw;
	float: left;
}
@media (max-width: 1000px) {
	li {
		width: 47.5vw;
		margin-right: 0;
	}
	li:nth-of-type(odd) {
		margin-right: 5vw;
	}
}

JavaScript

(function(){
    var ul = document.querySelector('ul');
    var li = [].slice.call(ul.querySelectorAll('li'));

    li.forEach(function(el,i) {
        el.addEventListener('mouseover', function(e) {

            // Check opened expand
            var exp = ul.querySelector('.expand') || null;
            exp ? exp.parentNode.removeChild(exp) : null;

            // Search last right child
            if(window.getComputedStyle(el).marginRight !== "0px") {
                while(window.getComputedStyle(el).marginRight !== '0px') el = li[i++]
            }

            // Create expand element
            var div = document.createElement('div');
            div.textContent = this.textContent;
            div.className = 'expand';

            // Append
            el.parentNode.insertBefore(div, el.nextSibling);

        });
    });
})();