Impossible to put an image next to the table using domPDF - html

Question

I have the table shown below; what I want is to insert an image next to the table in my pdf view. I am using domPDF.
I try to use display inline-block but domPDF doesn't support display inline.
table {
width: 100%;
border-collapse: collapse;
border-spacing: 0;
margin-bottom: 20px;
}
table th,
table td {
padding: 20px;
background: #EEEEEE;
text-align: center;
border-bottom: 1px solid #FFFFFF;
}
table th {
white-space: nowrap;
font-weight: normal;
}
table td {
text-align: right;
}
table td h3 {
color: #ab5401;
font-size: 1.2em;
font-weight: normal;
margin: 0 0 0.2em 0;
}
table .no {
color: #FFFFFF;
font-size: 1.6em;
background: #ad9c82;
}
table .desc {
text-align: left;
}
table .total .total-div {
text-decoration: line-through;
}
table .total {
background: #ad9c82;
color: #FFFFFF;
}
table td.total {
font-size: 1.2em;
}
table tbody tr:last-child td {
border: none;
}
table tfoot td {
padding: 10px 20px;
background: #FFFFFF;
border-bottom: none;
font-size: 1.2em;
white-space: nowrap;
border-top: 1px solid #AAAAAA;
}
table tfoot tr:first-child td {
border-top: none;
}
table tfoot tr:last-child td {
color: #ab5401;
font-size: 1.4em;
border-top: 1px solid #ab5401;
}
table tfoot tr td:first-child {
border: none;
}
<table border="0" cellspacing="0" cellpadding="0">
<thead>
<tr>
<th class="no">#</th>
<th class="desc">DESCRIPTION</th>
<th class="total">TOTAL</th>
</tr>
</thead>
<tbody>
<tr>
<td class="no">01</td>
<td class="desc">
<h3>Website Design</h3>Creating a recognizable design solution based on the company's existing visual identity</td>
<td class="total">$1,200.00</td>
</tr>
<tr>
<td class="no">02</td>
<td class="desc">
<h3>Website Development</h3>Developing a Content Management System-based Website</td>
<td class="total">$3,200.00</td>
</tr>
</tbody>
<tfoot>
<tr>
<td colspan="2"></td>
<td colspan="2">SUBTOTAL</td>
<td>$5,200.00</td>
</tr>
<tr>
<td colspan="2"></td>
<td colspan="2">TAX 25%</td>
<td>$1,300.00</td>
</tr>
<tr>
<td colspan="2"></td>
<td colspan="2">GRAND TOTAL</td>
<td>$6,500.00</td>
</tr>
</tfoot>
</table>
While the image for placeholder is the following:
<img src="https://picsum.photos/200" alt="Image example">
I tried to add it but it is always placed under the table, not next to it as I want.

Answer 1

Try Adding good old floats.
table {
width: 100%;
border-collapse: collapse;
border-spacing: 0;
margin-bottom: 20px;
}
table th,
table td {
padding: 20px;
background: #EEEEEE;
text-align: center;
border-bottom: 1px solid #FFFFFF;
}
table th {
white-space: nowrap;
font-weight: normal;
}
table td {
text-align: right;
}
table td h3 {
color: #ab5401;
font-size: 1.2em;
font-weight: normal;
margin: 0 0 0.2em 0;
}
table .no {
color: #FFFFFF;
font-size: 1.6em;
background: #ad9c82;
}
table .desc {
text-align: left;
}
table .total .total-div {
text-decoration: line-through;
}
table .total {
background: #ad9c82;
color: #FFFFFF;
}
table td.total {
font-size: 1.2em;
}
table tbody tr:last-child td {
border: none;
}
table tfoot td {
padding: 10px 20px;
background: #FFFFFF;
border-bottom: none;
font-size: 1.2em;
white-space: nowrap;
border-top: 1px solid #AAAAAA;
}
table tfoot tr:first-child td {
border-top: none;
}
table tfoot tr:last-child td {
color: #ab5401;
font-size: 1.4em;
border-top: 1px solid #ab5401;
}
table tfoot tr td:first-child {
border: none;
}
<div style="width: 65%;float:left;">
<table border="0" cellspacing="0" cellpadding="0">
<thead>
<tr>
<th class="no">#</th>
<th class="desc">DESCRIPTION</th>
<th class="total">TOTAL</th>
</tr>
</thead>
<tbody>
<tr>
<td class="no">01</td>
<td class="desc">
<h3>Website Design</h3>Creating a recognizable design solution based on the company's existing visual identity</td>
<td class="total">$1,200.00</td>
</tr>
<tr>
<td class="no">02</td>
<td class="desc">
<h3>Website Development</h3>Developing a Content Management System-based Website</td>
<td class="total">$3,200.00</td>
</tr>
</tbody>
<tfoot>
<tr>
<td colspan="2"></td>
<td colspan="2">SUBTOTAL</td>
<td>$5,200.00</td>
</tr>
<tr>
<td colspan="2"></td>
<td colspan="2">TAX 25%</td>
<td>$1,300.00</td>
</tr>
<tr>
<td colspan="2"></td>
<td colspan="2">GRAND TOTAL</td>
<td>$6,500.00</td>
</tr>
</tfoot>
</table>
</div>
<div style="width: 30%;float:left;">
<img src="https://picsum.photos/200" alt="Image example" style="width: 100%;">
</div>