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>