How to align image to the bottom in a div inside td - html

Question

I have designed a two column display using table.
I want to align image to the bottom inside td. I used vertical-align: top property in td to show the text from top but here is another problem, I want to show image with the text as well but sometimes when text get larger then some td boxes looks larger than another td boxes, I want to show equal td boxes.
There is free space in bottom of some td boxes, I think if I show the image from bottom then free space will shift from bottom to mid so these boxes will look attractive.
I do not want to show the image from top but bottom for that purpose i used another div for the image inside td but all in vain.
Note:- I have tried different positions properties like relative, absolute but none of them working (and sorry for my English).
$rows = $result->num_rows; // Find total rows returned by database
if($rows > 0) {
//if ($result->num_rows > 0) {
// output data of each row
$cols = 2; // Define number of columns
$counter = 1; //
$nbsp = $cols - ($rows % $cols); // Calculate t
echo '<table width="100%" align="center" cellpadding="4"
cellspacing="10" border= 1px solid white>';
while($row = $result->fetch_assoc()) {
$ads = $row['ads_id'];
$id = $row['user_id'];
if(($counter % $cols) == 1) { // Check if it's new row
echo '<tr>';
}
echo "<td>";
echo "<a href='welcome.php?user_id=$id&&ads_id=$ads'>";
echo "Book title - ". $row["title"] ."<br>";
echo "Book author - " . $row["author"] . "<br>";
echo "Price - " . $row["price"]. "<br>";
echo "Grade - " . $row["grade"]. "<br>";
echo "Description - " . $row["descrip"]. "<br>";
$img = $row['pic'];
echo "<div class=csc>";
echo '<img src="'.$img.'">';
echo"</div>";
echo "</a>";
echo "</td>";
if(($counter % $cols) == 0) {
echo "</tr>";
}
$counter++;
//echo "</table>";
}
if($nbsp > 0) { // Add unused column in last row
for ($i = 0; $i < $nbsp; $i++) {
echo '<td> </td>';
}
echo '</tr>';
}
echo '</table>';
} else {
echo "0 results";
}
$conn->close();
?>
This is the CSS part
table {
width: 100%;
text-align:center;
}
th, td {
vertical-align: top;
text-align: left;
padding: 8px;
background: #D9E4F5;
width: 50%;
font-family: georgia;
.csc{
bottom:1000px;
}
.csc img{
display: inline-block;
width: 100%;
height: 100px;
margin-top: 100px;
bottom:2000px;
}

Answer 1

First of all you've missed a } in your css.
This may solve your problem:
table {
width: 100%;
text-align: center;
}
th, td {
vertical-align: bottom; /* This is what you need */
text-align: left;
padding: 8px;
background: #D9E4F5;
width: 50%;
font-family: georgia;
}
.csc{
bottom: 1000px;
}
.csc img{
display: inline-block;
width: 100%;
height: 100px;
margin-top: 100px;
bottom: 2000px;
}