Text aligned in the lower right corner of the screen

Question

How to align two texts in the bottom right corner of the canvas in css, one in each row, example:

           IVP
Inventory Variant Position

IVP centered just above the meaning, but both in the lower right corner.

I tried so, but unsuccessfully:

<div class='page test-page' id='ivp-page-1'>
    <h3>IVP</h3>
    <h4>INVENTORY VARIANT POSITION</h4>
</div>

h3, h4 {
    position: relative;
    width: 0;
    min-width: 825px;
    height:700px;
    text-align: right;
    float: right;
    margin-left:3.7%;
    margin-right:3.7%;
    padding-left:0.5%;
    padding-right:0.5%;
}

Answer 1

One of the ways to do and using position:absolute to place the entire div in the lower right corner and text-align:center in the text to align the way you want.

OBS: note that you should not use width in div Okay, eat she’s with position:absolute it takes on the width of the largest content that is inside, the maximum width then is the largest text and the other smaller text is centered on the larger text understand.

html, body {
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
}

.test-page {
    position: absolute;
    right: 10px;
    bottom: 10px;
}
h3, h4 {
    text-align: center;
    margin: 0;
}

<div class='page test-page' id='ivp-page-1'>
    <h3>IVP</h3>
    <h4>INVENTORY VARIANT POSITION</h4>
</div>