The border goes all the way to the right

So I made a a calculator to change kilogram to pound and I was going to add a border to a pelement but the bordergoes all the way to the right So here is the html

<!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">

  <title>HTML</title>
  
  <!-- HTML -->
  

  <!-- Custom Styles -->
  <link rel="stylesheet" href="style.css">
</head>

<body>
  <input type="number" placeholder="Type Weight In Kilograms" id="kilograms">
    <p id="pounds">0</p>
   <p id="dinnars" class="dinnars">0</p>
  <script src="main.js"></script>
</body>
</html>

And here is the css

*{
  padding: 0%;
  margin: 0%;
  box-sizing: inherit;
}


body {
    font-size: 15pt;
    width: 480px;
    height: 500px;
    box-sizing: border-box;
}
#kilograms {
  position: relative;
  top: 70px;
  left: 140px;
  border: 20px solid crimson;
  border-radius: 4px;
}
#pounds {
  position: relative;
  top: 100px;
  left: 240px;
}
.dinnars {
  border: 15px solid darkorchid;
  position: relative;
  top: 150px;
  left: 240px;
  border-radius: 4px;
}

Solution

Add width: min-content; to your .dinnars class. I would also delete the top and bottom attributes. They are unnecessarily restricting your sizing.

Also, get rid of the top left attributes.

*{
  padding: 0;
  margin: 0;
  box-sizing: inherit;
  box-sizing: border-box;
}


body {
    font-size: 15pt;
    // width: 480px;
    // height: 500px;
}

#kilograms {
  position: relative;
  // top: 70px;
  // left: 140p;
  border: 20px solid crimson;
  border-radius: 4px;
}
#pounds {
  position: relative;
  // top: 100px;
  // left: 240px;
}
.dinnars {
  border: 15px solid darkorchid;
  width: min-content;
  position: relative;
  // top: 150px;
  // left: 240px;
  border-radius: 4px;
}

.box{
  border:2px dotted green;
  width: 500px;
  height 500px;
}

<div class='box'>
  <input type="number" placeholder="Type Weight In Kilograms" id="kilograms">
  <p id="pounds">0</p>
  <p id="dinnars" class="dinnars">0</p>
</div>