fixed vw units while positioning block to the right side

I have to use relative position (not absolute to keep element in the flow) and find a way to show element at the right edge of screen. But on some devices text not always sticks to right side. On mobile devices it's ok, but when width size about to 2000px the text gets cut off, sometimes the white gap gets bigger. I found a similar answer but there was no js, which is not my case. Is it possible to do that using vw for left and vh for top?

html, body {margin: 0; padding: 0}

#te {
    background-color: red;
    position: relative;
    left: 98.8vw;
}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="style.css">
</head>
<script src="script.js"></script>
<body>
    <span id="te">text</span>
</body>
</html>

Solution

combine it with translate:

html,
body {
  margin: 0;
  padding: 0
}

#te {
  background-color: red;
  display: inline-block; /* you need this for transform */
  position: relative;
  left: 100vw;
  transform: translate(-100%);
}

<span id="te">text</span>