I need help with the code snippet below, where I want each thumbnail image to have a checkbox overlay. I want the images to take up all the space in the table cell without any white space above. It is essential that the "left" and "right" divs are aligned vertically at their tops.
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css">
<script src="https://code.jquery.com/jquery-1.11.3.min.js"></script>
<script src="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
<style>
#container {
width: 180px;
background-color: #eee;
border-size: 0px;
}
#left {
display: inline;
float: left;
}
#right {
display: inline;
}
table {
border: 1px solid black;
border-collapse:separate;
border-spacing: 0;
margin: 0 ;
}
td { padding: 0px; }
</style>
</head>
<body>
<table >
<tr>
<td>
<div id="container" data-role="main">
<div id="left" >
<img src="https://drive.google.com/uc?id=1l0Rwz8GHUGY58lLems8FNyn9UrTFHX4HaA" height="185" width="100%">
</div>
<div id="right">
<input type="checkbox" name="vehicle" value="Car" checked>
</div>
</div>
</td>
<td>
<div id="container" data-role="main"><!--class="ui-content"-->
<div id="left">
<img src="https://drive.google.com/uc?id=1l0Rwz8GHUGY58lLems8FNyn9UrTFHX4HaA" height="185" width="100%">
</div>
<div id="right">
<input type="checkbox" name="vehicle2" value="Car" checked>
</div>
</div>
</td>
</tr>
</table>
</body>
</html>
Each table cell should resemble a box at the bottom of this screen: https://i.sstatic.net/8AYzJ.jpg