How to place blocks of text above or on input?

Question

css

Greetings
Is it possible to do something with this HTML code using styles:

<form>
    <div>Нравится</div>
    <div>+15</div>
    <input type="submit">
</form>

So that the final look would be like this:
And did it work?
I mean overlaying two divs on top of the input in such a way that when they/button are clicked, an action occurs. Right now the divs overlap the button and it can't be clicked. Of course, you can use JS, but is there a way to design this whole thing without it?

Answer 1

Once you have everything set up, it is most reasonable to set the divs that overlap the button with the pointer-events property set to none. This way the browser will ignore mouse events for these elements.

Answer 2

<form>
    <label>
        <div>Нравится</div>
        <div>+15</div>
        <input type="submit">
    </label>
</form>