Align HTML Input Button and Canvas side by side using CSS

on Mar 02, 2022 11:32 PM

I have a Label, a Canvas and an Input Button next to each other.

The Label and the Canvas are aligned fine but the Input Button is not.

How do I make them to align nicely?

It displays like this:

dotted line = Canvas

SIGNATURE: ---------------------------
           |                         |
           ---------------------------     Click to Sign

.auto-style3 {
    width: 18.4em;

<div style="display: inline-block;">
    <label class="auto-style3" for="Signature">SIGNATURE:</label>               
    <canvas id="cnv2" style="background-color:burlywood; height:50px; width:100px;"></canvas>
<div style="display: inline-block;">
    <input id="SignBtn2" name="SignBtn2" type="button" value="Click to Sign" onclick="StartSign()" />
Download FREE API for Word, Excel and PDF in ASP.Net: Download
on Mar 03, 2022 12:21 AM

I used

<div style="float:left;">

Which moved the bottom to the left top of the box.