So I am trying to make a custom table layout with the product description. I have the slider one and I wanted to make a table with 2 rows and 4 columns, so 8 items. I wanted each item to have a heading, a subheading, and then like a progress bar. I made it and it looks good on just a plain html document. I made it into one file so I don't have to link a stylesheet or anything but it glitches and makes it all weird. Attached here is a screenshot. This is my first time trying to make a custom description with html as I usually just do plain text. That is supposed to be the last item.
Item 1 | Item 2 | Item 3 | Item 4
Item 5 | Item 6 | Item 7 | Item 8
is how it is supposed to look. Can anyone help me out?
Here is the code I used. Thanks in advance!
<!--<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Feature Table</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div class="table-container">
<table class="feature-table">
<tbody>
<tr>
<td>
<h3>1GB</h3>
<p>RAM</p>
<div class="progress-bar">
<div class="progress" style="width: 70%;"></div>
</div>
</td>
<td>
<h3>Unlimited</h3>
<p>Slots</p>
<div class="progress-bar">
<div class="progress" style="width: 90%;"></div>
</div>
</td>
<td>
<h3>90</h3>
<p>Recommended Slots</p>
<div class="progress-bar">
<div class="progress" style="width: 50%;"></div>
</div>
</td>
<td>
<h3>Multicraft</h3>
<p>Control Panel</p>
<div class="progress-bar">
<div class="progress" style="width: 85%;"></div>
</div>
</td>
</tr>
<tr>
<td>
<h3>NVMe SSD</h3>
<p>Drive</p>
<div class="progress-bar">
<div class="progress" style="width: 95%;"></div>
</div>
</td>
<td>
<h3>Guaranteed</h3>
<p>DDOS Protection</p>
<div class="progress-bar">
<div class="progress" style="width: 100%;"></div>
</div>
</td>
<td>
<h3>Unlimited</h3>
<p>Disk Space</p>
<div class="progress-bar">
<div class="progress" style="width: 75%;"></div>
</div>
</td>
<td>
<h3>Unlimited</h3>
<p>Bandwidth</p>
<div class="progress-bar">
<div class="progress" style="width: 80%;"></div>
</div>
</td>
</tr>
</tbody>
</table>
</div>
</body>
</html>
-->
<div style="max-width: 800px; margin: auto; display: flex; flex-wrap: wrap;">
<div style="width: 50%; padding: 10px; box-sizing: border-box;">
<h3 style="margin: 0; font-weight: bold;">Sample Heading 1</h3>
<p style="margin: 0; font-size: 0.9em;">Subheading 1</p>
<div style="background-color: #f3f3f3; height: 20px; width: 100%; margin-top: 5px; border-radius: 5px; overflow: hidden;">
<div style="width: 70%; background-color: #4caf50; height: 100%;"></div>
</div>
</div>
<div style="width: 50%; padding: 10px; box-sizing: border-box;">
<h3 style="margin: 0; font-weight: bold;">Sample Heading 2</h3>
<p style="margin: 0; font-size: 0.9em;">Subheading 2</p>
<div style="background-color: #f3f3f3; height: 20px; width: 100%; margin-top: 5px; border-radius: 5px; overflow: hidden;">
<div style="width: 90%; background-color: #4caf50; height: 100%;"></div>
</div>
</div>
<div style="width: 50%; padding: 10px; box-sizing: border-box;">
<h3 style="margin: 0; font-weight: bold;">Sample Heading 3</h3>
<p style="margin: 0; font-size: 0.9em;">Subheading 3</p>
<div style="background-color: #f3f3f3; height: 20px; width: 100%; margin-top: 5px; border-radius: 5px; overflow: hidden;">
<div style="width: 50%; background-color: #4caf50; height: 100%;"></div>
</div>
</div>
<div style="width: 50%; padding: 10px; box-sizing: border-box;">
<h3 style="margin: 0; font-weight: bold;">Sample Heading 4</h3>
<p style="margin: 0; font-size: 0.9em;">Subheading 4</p>
<div style="background-color: #f3f3f3; height: 20px; width: 100%; margin-top: 5px; border-radius: 5px; overflow: hidden;">
<div style="width: 85%; background-color: #4caf50; height: 100%;"></div>
</div>
</div>
<div style="width: 50%; padding: 10px; box-sizing: border-box;">
<h3 style="margin: 0; font-weight: bold;">Sample Heading 5</h3>
<p style="margin: 0; font-size: 0.9em;">Subheading 5</p>
<div style="background-color: #f3f3f3; height: 20px; width: 100%; margin-top: 5px; border-radius: 5px; overflow: hidden;">
<div style="width: 95%; background-color: #4caf50; height: 100%;"></div>
</div>
</div>
<div style="width: 50%; padding: 10px; box-sizing: border-box;">
<h3 style="margin: 0; font-weight: bold;">Sample Heading 6</h3>
<p style="margin: 0; font-size: 0.9em;">Subheading 6</p>
<div style="background-color: #f3f3f3; height: 20px; width: 100%; margin-top: 5px; border-radius: 5px; overflow: hidden;">
<div style="width: 100%; background-color: #4caf50; height: 100%;"></div>
</div>
</div>
<div style="width: 50%; padding: 10px; box-sizing: border-box;">
<h3 style="margin: 0; font-weight: bold;">Sample Heading 7</h3>
<p style="margin: 0; font-size: 0.9em;">Subheading 7</p>
<div style="background-color: #f3f3f3; height: 20px; width: 100%; margin-top: 5px; border-radius: 5px; overflow: hidden;">
<div style="width: 75%; background-color: #4caf50; height: 100%;"></div>
</div>
</div>
<div style="width: 50%; padding: 10px; box-sizing: border-box;">
<h3 style="margin: 0; font-weight: bold;">Sample Heading 8</h3>
<p style="margin: 0; font-size: 0.9em;">Subheading 8</p>
<div style="background-color: #f3f3f3; height: 20px; width: 100%; margin-top: 5px; border-radius: 5px; overflow: hidden;">
<div style="width: 80%; background-color: #4caf50; height: 100%;"></div>
</div>
</div>
</div>
