a basic table around the content - html

Question

I am noob in HTML and CSS. I have content as shown in the image below and I need to wrap in a table again as shown in the picture using red colour. I tried with regular table format but it didn't work. Thanks in advance.
.bubble-info {
margin-top: -12px;
span {
display: inline-block;
border-radius: 50%;
border: 1px solid #0575e6;
&:nth-of-type(1) {
width: 20px;
height: 20px;
}
&:nth-of-type(2) {
width: 40px;
height: 40px;
}
}
}
.color-info {
background-image: linear-gradient(91deg, #8cc6ff, #0575e6);
display: inline-block;
width: 48%;
height: 10px;
border-radius: 10px;
margin-left: 10px;
margin-right: 10px;
margin-top: 15px;
}
<div class="row">
<br>
<div class="col-md-4 bubble-info">
<h5><b>Circle Size:</b></h5>
<small class="help-block">- No. of Students who got it wrong.</small><br/>
Less <span></span>
<span></span> More
</div>
<div class="col-md-5">
<h5><b>Circle Colour:</b></h5>
<small class="help-block">- Proficiency of the students.</small><br/>
Highly Proficient<span class="color-info"></span>Not Aware
</div>
</div>

Answer 1

The Table is based around the tag and inside the <table> tag there are table rows <tr> and inside those rows there are either a table head <th> or table data <td>. Here's an example driven from your code:
<table style="width:100%">
<tr>
<th><h5><b>Circle Size:</b></h5>
<small class="help-block">- No. of Students who got it wrong.</small><br/>
Less <span></span></th>
<th><h5><b>Circle Colour:</b></h5>
<small class="help-block">- Proficiency of the students.</small></th>
</tr>
<tr>
<td>Less <span></span>
<span></span> More</td>
<td>Highly Proficient<span class="color-info"></span>Not Aware</td>
</tr>
</table>

Answer 2

If you used bootstrap, you should use col-6 for 2 column and create a border class for col-6
.borderred{
border: 1px solid red;
}
HTML
<div class="container">
<div class="row">
<div class="col-md-6 borderred">
<h5><b>Circle Size:</b></h5>
<small class="help-block">- No. of Students who got it wrong.</small><br/>
</div>
<div class="col-md-6 borderred">
<h5><b>Circle Colour:</b></h5>
<small class="help-block">- Proficiency of the students.</small><br/>
</div>
</div>
<div class="row">
<div class="col-md-6 borderred">
Less <span></span>
<span></span> More
</div>
<div class="col-md-6 borderred">
Highly Proficient<span class="color-info"></span>Not Aware
</div>
</div>
</div>
.borderred{
border: 1px solid red;
}
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
<div class="container">
<div class="row">
<div class="col-md-6 borderred">
<h5><b>Circle Size:</b></h5>
<small class="help-block">- No. of Students who got it wrong.</small><br/>
</div>
<div class="col-md-6 borderred">
<h5><b>Circle Colour:</b></h5>
<small class="help-block">- Proficiency of the students.</small><br/>
</div>
</div>
<div class="row">
<div class="col-md-6 borderred">
Less <span></span>
<span></span> More
</div>
<div class="col-md-6 borderred">
Highly Proficient<span class="color-info"></span>Not Aware
</div>
</div>
</div>