I am trying to create a button with 2 parts of text, first the button text itself (title) and then (on the other side -> right) the price, also the price should have another color. So, if this is the button -> |title 3$|, the price must be aligned on the right! How would I do something like this? Please help, kind regards.

This is my button:

<input type="submit"
    name="message"
    
    style="text-align: left;"
    value="&nbsp Title">

CodePudding user response：

You should use the html button element instead of a input element:

<button type="submit" style="width:10em;"><span style="float:left;">title</span><span style="float:right;">3$</span></button>

CodePudding user response：

Because I already had the styling for the input, I solved it like this. But the other variant would also work. Thank you.

<div style="position: relative;" >

<input type="submit"
name="message"

style="text-align: left;"
value="&nbsp; ' . $row['title'] . '">
                                            
<span style="position: absolute; right: 10px; color: lightgreen; font-size: 150%; line-height: 245%">3$</span>

</div>