Is there any CSS rule to wrap this div as if it was inline, but with block characteristics?

Question

Visually, this is my problem:

The red arrows indicate the extra real estate that is not desired. I need the blue space to be ending where the word 'Any' ends, which so far, after numerous tests I have discovered only possible to achieve using 'display:inline;'. However, I need this span to have attributes of a block element, such as 'position:relative;' definable margins etc.

My current html structure is as follows:

.caption{
    position:relative;
}
.caption span.text{
    font-size: 50px;
    line-height: 50px;
    font-weight: 600;
    display: block;
    margin-bottom: 25px;
    position: relative;
    z-index: 1;
}

<div class="caption">
    <span class="text trans_all">Study in Any Country</span>
</div>

I have full control of the html structure, which can be amended to suit any sort of solution. So far I have tried flex with grow/shrink/base, floating, all 'display:xxx;' variations, to no avail. Is there any technique to make this happen?

BTW the screenshot is from Chrome for Windows. Also worth mentioning, that if at all possible I would prefer a CSS/HTML based solution.

Your help is much appreciated!