match heights of divs inside two display: tablecell divs - html

Question

I'm having an issue related to using divs with the display set to table-cell. The purpose of using table-cell was so that the height of these two divs would match up. However, each of these divs also have another div set inside it to create the yellow dotted outline you see in the picture:
When one of the table cells grow, the yellow outline of the other doesn't grow to match its adjacent one. Hoping someone can help me with a fix, any help appreciated. Here is my code below:
.generalinfocontainer {
width: 50%;
height: auto;
background-image: url("https://imgur.com/qbIkHqm.png");
display: table-cell;
border-radius: 25px;
text-shadow: 1px 1px #000000;
}
.statscontainer {
width: 30%;
height: auto;
background-image: url("https://imgur.com/qbIkHqm.png");
display: table-cell;
border-radius: 25px;
text-shadow: 1px 1px #000000;
}
.t {
display: table;
width: 100%;
border-spacing: 20px;
}
.generalinfowrapper {
border-width: 2px;
border-color: yellow;
border-style: dashed;
margin: 3px;
border-radius: 25px;
height: 100%;
padding: 8px;
}
.statswrapper {
border-width: 2px;
border-color: yellow;
border-style: dashed;
margin: 3px;
border-radius: 25px;
height: 100%;
padding: 8px;
}
.statbar {
border-radius: 15px;
background-image: url("https://imgur.com/gdh95cn.png");
padding: 1px;
width: 100%;
height: auto;
border-style: solid;
border-color: black;
border-width: 1px;
}
.fillbar {
border-radius: 15px;
background-color: #a3c1ad;
height: 100%;
padding-left: 4px;
border-color: black;
border-width: 1px;
border-style: solid;
margin: 0px;
}
.boxtitle {
text-align: center;
}
<div class="t">
<div class="generalinfocontainer">
<div class="generalinfowrapper">
[b][size=24][color=yellow]KOMON HYUUGA[/color][/size][/b]
</div>
</div>
<div class="statscontainer">
<div class="statswrapper">
<div class="boxtitle">
[b][size=24][color=yellow]STATISTICS[/color][/size][/b]
</div>
[b]VIGOR[/b]<br />
<div class="statbar">
<div class="fillbar" style="width:80%;"> 80/100</div>
</div>
[b]CHAKRA[/b]<br />
<div class="statbar">
<div class="fillbar" style="width:80%;"> 80/100</div>
</div>
[b]SPEED[/b]<br />
<div class="statbar">
<div class="fillbar" style="width:80%;"> 80/100</div>
</div>
[b]STRENGTH[/b]<br />
<div class="statbar">
<div class="fillbar" style="width:80%;"> 80/100</div>
</div>
</div>
</div>

Answer 1

The purpose of using table-cell was so that the height of these two divs would match up.
Well, what you are trying to achieve can be done with less code using Flexbox, or CSS Grid. Take a look:
.t {
display: grid;
grid-template-columns: 2fr 1fr;
gap: 20px;
}
.generalinfocontainer,
.statscontainer {
background-image: url("https://imgur.com/qbIkHqm.png");
border-radius: 25px;
text-shadow: 1px 1px #000000;
border-width: 2px;
border-color: yellow;
border-style: dashed;
padding: 8px;
}
.statbar {
border-radius: 15px;
background-image: url("https://imgur.com/gdh95cn.png");
padding: 1px;
border: 1px solid solid black;
}
.fillbar {
border-radius: 15px;
background-color: #a3c1ad;
padding-left: 4px;
border: 1px solid black;
}
.boxtitle {
text-align: center;
}
<div class="t">
<div class="generalinfocontainer">
<div class="generalinfowrapper">
[b][size=24][color=yellow]KOMON HYUUGA[/color][/size][/b]
</div>
</div>
<div class="statscontainer">
<div class="statswrapper">
<div class="boxtitle">
[b][size=24][color=yellow]STATISTICS[/color][/size][/b]
</div>
[b]VIGOR[/b]<br />
<div class="statbar">
<div class="fillbar" style="width:80%;"> 80/100</div>
</div>
[b]CHAKRA[/b]<br />
<div class="statbar">
<div class="fillbar" style="width:80%;"> 80/100</div>
</div>
[b]SPEED[/b]<br />
<div class="statbar">
<div class="fillbar" style="width:80%;"> 80/100</div>
</div>
[b]STRENGTH[/b]<br />
<div class="statbar">
<div class="fillbar" style="width:80%;"> 80/100</div>
</div>
</div>
</div>
</div>