I want two divs to move dynamically with one another

I have a sentenced with a solid border around it. When I the sentence, the border changes, adjusting to fit the sentence. I also have a pink circle. I would like the pink circle to be in the top right corner of the border around the sentence no matter the length of the sentence - I want the circle to move dynamically with the border.

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewpoint" content="width=device-width,initial-scale=1">
    <title>Family Tree Creator</title>
    <link href="Style.css" rel="stylesheet" type="text/css">
</head>
<body>

        <div class="nameone">Core water is soooo good!!</div>
        <div class="circleone"></div>

</body>
</html>

.nameone {
  border: 3px solid darkgray;
  display: inline-block;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  position: absolute;
  padding: 15px;
}

.circleone{
  border: 3px solid pink;
  border-radius: 50%;
  width: 15px;
  height: 15px;
}

I'm new to css and html so I tried several variations of placing s inside of one another but nothing

Solution

I would apply flex to the container (in your example body, but I recommend to create a seperate container div), with the usual settings for centering its only child (see below).

Then apply position: relative to .nameone to make it act as the position anchor for the absolutely positioned .circleone div which you have to move inside the .nameone div to be its child, with top and right settings as below to place the circle into the top right corner of its parent:

body {
  margin: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
}

.nameone {
  border: 3px solid darkgray;
  position: relative;
  padding: 20px;
}

.circleone {
  position: absolute;
  border: 3px solid pink;
  border-radius: 50%;
  width: 15px;
  height: 15px;
  top: 2px;
  right: 2px;
}

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <meta name="viewpoint" content="width=device-width,initial-scale=1">
  <title>Family Tree Creator</title>
  <link href="Style.css" rel="stylesheet" type="text/css">
</head>

<body>

  <div class="nameone">Core water is soooo good!!
    <div class="circleone"></div>
  </div>
</body>

</html>

Another solution would be to create the circle by adding a pseudo element (.nameone::after) in CSS with very similar settings as above, but without the circle div in the HTML code:

body {
  margin: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
}

.nameone {
  border: 3px solid darkgray;
  position: relative;
  padding: 20px;
}

.nameone::after {
  content: "";
  position: absolute;
  border: 3px solid pink;
  border-radius: 50%;
  width: 15px;
  height: 15px;
  top: 2px;
  right: 2px;
}

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <meta name="viewpoint" content="width=device-width,initial-scale=1">
  <title>Family Tree Creator</title>
  <link href="Style.css" rel="stylesheet" type="text/css">
</head>

<body>
  <div class="nameone">Core water is soooo good!!</div>
</body>

</html>