How to put a line under a word and controle marging of an element CSS

I'm facing two issues please,

first I want to controle width of a line under a word, could you tell me please how can I achieve this result please,
enter image description here
I tries to put text-decoration: underline; but it gives a line under the whole word.
the second problem, I want to put a container over a container, the first one with an image and the second one with a form, when I open in:
tablette :
enter image description here
it gives the expected result, but when I open in the browser it gives this :
enter image description here
as you see the image is pushed on the left.
what I'm looking for , is I want the image to be displayed always at the right of the screen like this :
enter image description here

css of the first container :

background: #F8F8F8;
margin-right: 40px;
padding: 35px;
position: relative;
z-index: 999;

css of the container contains the image :

height: 350px;
position: absolute;
z-index: 1;

css of the first container :

background: #F8F8F8;
margin-right: 40px;
padding: 35px;
position: relative;
z-index: 999;

css of the container contains the image :

height: 350px;
position: absolute;
z-index: 1;

For the first thing:

HTML:

<span class="underlined-text">Creez Vorte Compe</span>

CSS:

.underlined-text {
    position: relative;
    display: inline-block;
}

.underlined-text::after {
    content: '';
    position: absolute;
    bottom: -3px;
    left: 0;
    display: block;
    height: 2px;
    background-color: black;
    width: 100%; /* Change this to achieve what you want to achieve */
}

As for your second problem, I don't really get what's the problem but one possible solution is specifying a width for divs. This will make sure that the divs don't take all available space.