Create a new version of paste:

<!-- Proof of concept: compatible with Internet Explorer 8 -->

<!DOCTYPE html>
<html lang="en">
<head>
	<title>Grid and list layout toggle demo</title>
	<meta name="author" content="Elominius from Wikiversity">

	<!-- necessary to render the interpuncts correctly in older browser versions -->
	<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">

	<!-- compatibility -->
	<meta name="viewport" content="width=device-width, initial-scale=1">
</head>

<body>

<div class="toggle_grid_list_buttons">
	<!-- "Toggle to grid view" button initially  hidden -->
	<button onclick="toggleView_demo();" style="display:none;">Toggle to grid view</button>
	<button onclick="toggleView_demo();">Toggle to list view</button>
</div>

<ul class="item_container grid">
	<li>
		<div class="thumbnail_wrapper">
			<div class="thumbnail_container">
				<!-- a picture would go here -->
				<span class="thumbnail_duration">6:38</span>
			</div>
		</div>
		<div class="info_wrapper">
			<div class="title_container" title="This is a title.">
				<!-- fake hyperlink colour for illustration purposes -->
				<span class=fake_URL>This is a title.</span>
			</div>
		    <div class="status_container">
				<!-- non-breaking spaces after numbers -->
				by <span class="channel_name fake_URL" title="312,147&nbsp;subscribers">VideoCreator</span> <span class="subscriber_count list_show">(312,147&nbsp;subscribers)</span> • <time class="upload_date" datetime="2022-06-12T10:11:16" title="June 12, 2022 &#10;10:11:16 (UTC)">2&nbsp;weeks ago</time> • <span class="view_count" title="56,887 views since 24 hours">1,013,237&nbsp;views</span> • <span class="rating" title="106,228 likes, &#10;3187 dislikes">97% liked</span>
			</div>
			<div class="description_container list_show">
				This is the description. It can only be seen in list view. It does not matter if it contains too much text for the space, since excess text can be hidden or extend downwards.
			</div>
		</div>
	</li>
</ul>

<!-- This "type" attribute serves as a label for the source code, and is not necessary in modern browsers. Same with "text/javascript". -->
<style type="text/css">
/* font pack */
body { font-family: 'noto sans', ubuntu, 'segoe ui', futura, arial, helvetica, 'trebuchet ms', tahoma, verdana, sans-serif; }

/* shared style */
.item_container { 
	list-style: none;
	padding-right: 1em;

}
.thumbnail_container { 
	width:256px; height:144px;
	position: relative; /* necessary to keep .thumbnail_duration inside thumbnail */
    border: 2px solid grey;
    margin-right: 1em;
    margin-bottom: 0.5em;
    background-color: lightblue; /* placeholder */
    border-radius: 5px;
}

.title_container { font-size:20pt; }
.fake_URL { color:#48C; } /* for illustration */
.status_container { font-size:10pt; color:#555; padding-bottom:5pt; }
.description_container { 
	display:block;
	/* description height limit */
	max-height:5em; /* 5 lines */
	overflow-y: hidden; /* hide excess text */
	/* end line with ellipsis for newer browsers */
	/* display: -webkit-box;
	text-overflow:ellipsis;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 5; */
}

.thumbnail_duration {
	display: inline-block;
	position: absolute;
	background-color: rgba(0,0,0,0.5);
	padding:0 4px;
	bottom:0; right:0;
	border-radius: 5px; /* fallback */
	border-radius: 5px 0 3px 0;
}

	/* only visible in specific modes */
.grid_show { display: none; }
.list_show { display: none; }

/* grid view */
.item_container.grid .grid_show { display: inline; }
	/* moves title closer to video above than below to clarify that it belongs to the former */
.item_container.grid .status_container { padding-bottom: 15pt; }
.item_container.grid .thumbnail_container { margin-bottom: 0; }

.item_container.grid li { 
	/* limit width per item */
	display: inline-block;
    width: 256px;
    margin-right:1em;

}

	/* hide description – obsolete due to .list_show */
/* .item_container.grid .description_container { display:none; } */


/* list view */
.item_container.list .list_show { display: inline; }
.item_container.list .description_container {
	display:block;
	width:calc(100% - 300px); /* limit width to avoid breaking underneath */
}
.item_container.list li { display:block; clear:both; } /* extend over entire row */
.item_container.list .thumbnail_wrapper { 
	display: inline-block;
    width: 256px;
	float:left;
    margin-right: 1em;
}

.item_container.list .info_wrapper { 
	/* Deactivated due to possibility of it getting below the thumbnail. Might be necessary on older browsers, but would require fixed width. */
	/* display: inline-block; */
    /* width: 256px; */
}

/* responsive width - puts information below thumbnail on narrow displays (optional) */
@media (max-width: 720px) {
  .item_container.list .thumbnail_wrapper { float:none; }
  .item_container.list .description_container { width: 100%; }
}

/* dark theme (optional) */
body { background-color:#222; color:#eee; }
.status_container { color:#aaa; }
</style>

<script type="text/javascript">
// put item container into shortcut variable
var item_container = document.querySelectorAll(".item_container")[0];
var first_item = item_container.querySelectorAll("li")[0];
var toggle_grid_list_buttons = document.querySelectorAll(".toggle_grid_list_buttons")[0].querySelectorAll("button");


// set view
function setView(mode) {
	// if none set, default to grid
	if (item_container.getAttribute("class").search("grid")+item_container.getAttribute("class").search("list") == -2) {
		item_container.getAttribute("class")="item_container grid";
		document.cookie = "view_mode=grid";
	}

	switch(mode) {
		case "list":
			// replaces the "grid" class with "list"
			item_container.setAttribute("class",item_container.getAttribute("class").replace('grid','list') );

			// hides "toggle to list view" button and shows "toggle to grid view" button
			toggle_grid_list_buttons[0].style.display="block";
			toggle_grid_list_buttons[1].style.display="none";

			// stores view mode into cookie
			document.cookie = "view_mode=list";
			break;
		case "grid":
			// replaces the "list" class with "grid"
			item_container.setAttribute("class",item_container.getAttribute("class").replace('list','grid') );

			// hides "toggle to grid view" button and shows "toggle to list view" button
			toggle_grid_list_buttons[0].style.display="none";
			toggle_grid_list_buttons[1].style.display="block";

			// stores view mode into cookie
			document.cookie = "view_mode=grid";
			break;
	}
}

// toggle view
function toggleView_demo(mode) {
	if (
		// checks if grid mode is activated by looking for the word "grid" in the class
		item_container.getAttribute("class").search("grid") > -1
	) {
		setView("list");
	} else if (
		// checks for list mode
		item_container.getAttribute("class").search("list") > -1
	) {
		setView("grid");
	} else { 
		// add "grid" class by default
		item_container.getAttribute("class")+=" grid";
		document.cookie = "view_mode=grid";
	}
}

// Cookie function dependencies
function setCookie(cname, cvalue, exdays) {
  var d = new Date();
  d.setTime(d.getTime() + (exdays * 24 * 60 * 60 * 1000));
  var expires = "expires="+d.toUTCString();
  document.cookie = cname + "=" + cvalue + ";" + expires + ";path=/";
}

function getCookie(cname) {
  var name = cname + "=";
  var ca = document.cookie.split(';');
  for(var i = 0; i < ca.length; i++) {
    var c = ca[i];
    while (c.charAt(0) == ' ') {
      c = c.substring(1);
    }
    if (c.indexOf(name) == 0) {
      return c.substring(name.length, c.length);
    }
  }
  return "";
}


// check configuration (note: only Firefox stores cookies for locally opened HTML files.)
if ( getCookie("view_mode") == "grid" ) setView("grid");
if ( getCookie("view_mode") == "list" ) setView("list");


// Description width fallback for older browsers – uncomment and optionally convert to "onresize" if necessary.
/*
document.body.appendChild( document.createElement("style") );
var description_width_fallback = document.body.lastChild;
document.body.lastChild.getAttribute("class")="description_width_fallback"; // label for page inspector

window.addEventListener('resize', function(event) {
	if ( item_container.getAttribute("class").search("list") > -1 ) {
		description_width_fallback.innerHTML = ".item_container.list .description_container { width: " + (first_item.offsetWidth-400) +"px; }";
	}
}, true);
*/

// Multiply list items for illustrative purposes – the following code would not be implemented on an actual web site.
var li_1_content = first_item.innerHTML;
var color_list = ['darkred', 'green', 'blue', 'yellow', 'orange', 'darkorange', 'darkgreen', 'darkseagreen', 'lightyellow', 'lightblue', 'lightskyblue', 'lightgreen', 'teal', 'turquoise', 'darkturquoise', 'mediumturquoise', 'lightcoral', 'antiquewhite', 'aqua', 'aquamarine', 'purple', 'violet', 'darkviolet', 'indigo', '#38F', 'lightseagreen', 'deepskyblue', 'steelblue', 'royalblue', 'beige', 'ivory', 'gray', 'slategray', 'darkslategray', 'wheat', 'gold', 'silver', 'brown', 'olive', 'lime', 'limegreen', 'greenyellow', 'yellowgreen', 'seagreen', 'crimson'];
var count = 0;

for (
	count = 0; // start counter
	count < Math.floor(10+Math.random()*40); // repeat 10 to 50 times
	count++ // count up
	) {
	item_container.appendChild(	document.createElement("li") );
	item_container.lastChild.innerHTML=li_1_content;
	// random color
	var random_number = Math.floor(Math.random()*(color_list.length));
	item_container.lastChild.querySelectorAll(".thumbnail_container")[0].style.backgroundColor=color_list[random_number];
}
</script>

</body>
</html>