How can I position two texts like in the image?-CodePudding

I can't figure out a way to position this two elements.

Thank you in advance

CodePudding user response：

How I would approach this is creating a div container to store the two pieces of text and setting the display of it to "inline-block". Assign a width to each of the h1 and h2 elements respectively to get the word wrapping you want and set the float value of h2 to "right". This should allow it to fit to the right of the bottom line of text in the h1 element. Here's some example code:

<html>
    <head>
        <style>
            div{
                display:inline-block;
                width:280px;
            }
            #bigText{
                font-size:64px;
                width:250px;
            }
            #littleText{
                font-size:24px;
                width:120px;
                float:right;
            }
        </style>
    </head>
    <body>
        <div>
            <span id='bigText'>
                This is a very big text
            </span>
            <span id='littleText'>
                and this is a smaller text
            </span>
        </div>
    </body>
</html>

CodePudding user response：

I'm assuming you want to make your code look like the image. You could try wrapping the h1 and h2 with another position: relative div and position them using position: absolute and the top, bottom, left and right attributes.
Sorry, you'll have to supply the code you've come up with so far and a bit more detail for a better answer.