Resize HTML column and resize whole table to match div - html

Question

I got a div serving as a header and below it a table that acts as a post, with a title, body and one cell and/or colums that hass arrows and a counter for upvotes and downvotes.
First problem I have is alignment and second resizing colums
Here is my code
table, th, td {
border: 1px solid black;
border-collapse: collapse;
}
th, td {
padding: 5px;
text-align: left;
}
table {
table-layout: fixed;
margin: 0 auto;
width: 50%;
}
#votes {
text-align: center;
}
div {
font-size: 25px;
margin: auto;
color: white;
background-color: black;
padding: 15px;
width: 50% ;
border-radius: 12px;
}
<div>RANDOM THINGS</div>
<table>
<tr>
<th id="title">Title</th>
<th id="votes" rowspan="3">
<img src='images/arrow_up.png' onclick='Upvote()'/>
<br>0<br>
<img src='images/arrow_down.png' onclick='Downvote()'/>
</th>
</tr>
<tr id="textBody">
<td rowspan="2">Text Body</td>
</tr>
<tr>
</tr>
</table>
What I got so far

Answer 1

You need to add box-sizing: border-box; to the div so it doesn't expand it's width in order to add the padding.
If using border-box the width and height properties (and min/max properties) includes content, padding and border.
Your css would end up as:
div {
font-size: 25px;
margin: auto;
color: white;
background-color: black;
padding: 15px;
width: 50% ;
border-radius: 12px;
box-sizing: border-box;
}
The rest of it unchanged. Here you have a CodePen showcasing it: https://codepen.io/javierojeda/pen/LqpLVN
However, as #hungerstar mention... You wouldn't use a table for that kind of things. You may want to use the new display: grid, display: flex or even use 3 divs and some CSS to accommodate them as you need.
For more info:
https://www.w3schools.com/cssref/css3_pr_box-sizing.asp
https://www.w3schools.com/css/css_grid.asp
https://www.w3schools.com/css/css3_flexbox.asp