changing width of div to match width of span tag

changing width of div to match width of span tag

This is my first post here. I have been searching through questions
previously posted that sound similar to what I am encountering I've tried
those answers and still haven't made it work yet.
I got the following code. Somewhat similar to what I'm working on.
.ContentTable {
width:100%;
heigth:100%;
empty-cells:show;
}
.WidthLimited{
overflow:scroll;
overflow-x:auto;
overflow-y:hidden;
}
.ResultListContainer{
width:95%;
color:black;
}
<div id="Wrapper">
<div id="Content1"/>
<span id"SearchControl">
<table class="ContentTable">
<tbody>
<tr id="Title">Title here</tr>
<tr id="Body">
<td>Some text 1</td>
<td>Some text 2</td>
<td>Some text 3</td>
</tr>
<tr id="Body">
<td>Some text 1</td>
<td>Some text 2</td>
<td>Some text 3</td>
</tr>
<tr id="Body">
<td>Some text 1</td>
<td>Some text 2</td>
<td>Some text 3</td>
</tr>
<tr id="Footer">
<td>Some text</td>
</tr>
</tbody>
</table>
</span>
<div id="ResultList" class="WidthLimited">
<table class="ResultListContainer">
<tbody>
<tr id="Title">Title here</tr>
<tr id="Body">
<td>Some text 1</td>
<td>Some text 2</td>
<td>Some text 3</td>
</tr>
<tr id="Body">
<td>Some text 1</td>
<td>Some text 2</td>
<td>Some text 3</td>
</tr>
<tr id="Body">
<td>Some text 1</td>
<td>Some text 2</td>
<td>Some text 3</td>
</tr>
<tr id="Body">
<td>Some text 1</td>
<td>Some text 2</td>
<td>Some text 3</td>
</tr>
<tr id="Body">
<td>Some text 1</td>
<td>Some text 2</td>
<td>Some text 3</td>
</tr>
<tr id="Footer">
<td>Some text</td>
</tr>
</tbody>
</table>
</div>
</div>
Also got the following javascript to be able to adjust the width:
function fn_wrapperResultList()
{
var wObj = document.getElementById("wrapperResultList");
var pObj = document.getElementById("SearchControl");
if(window.attachEvent)
{
if(pObj.offsetWidth>wObj.offsetWidth)
{
wObj.style.width=pObj.offsetWidth;
}
}
else
{
wObj.style.width='100%';
}
}
In essence what I am trying to accomplish is to adjust the width of my
ResultList (which in this case is wider than my SearchControl) and match
the width of the SearchControl when the former's width is higher than the
latter's width (ResultList.width > SearchControl.width then adjust it).
If I assign a fixed width to my WidthLimited class, my control does change
and scroll-x is displayed with no problem and works as expected but I am
trying to make it change according to SearchControl.
I've tried lots of things: calculating the width using the
getComputedStyle and assigning it to wObj.style.width in that javascript
code which it does change when but still does not resizes. I added the
display:inline-block; to the .WidthLimited class and nothing. I read that
span does not really have a specific width but changing that piece is not
really an option at this point.
Is there a way to accomplish what I intend? I've been stuck for days now
and I am starting to pull my hair out. I really appreciate your help.