HTML input tag unexpectedly moves CSS gridlines

Question

To simplify my problem, let's say I have a 2x2 CSS grid div. I used a grid template to resize 3 divs (class names: "btn", "title" and "info") within these 4 cells as shown in the following code snippet. (Merge 2 columns in 2nd row to keep 3rd div class="info")

The first div (class="btn") has an aspect ratio of 1/1. So I just set its height to 10vh and it becomes a square.

my question

The problem is the "input" tag in the last div class="info". If I don't enter a tag, everything works as expected. The middle gridline respects the minimum content of the first column (as it is set in grid-template-columns) and remains at the leftmost position.

But if I use that input tag in the last div, it moves the grid center line unexpectedly! This is unexpected because the second row of the grid has enough space and I don't think it should be moved.

To see the problem, just remove the input tag from the code snippet below and see the difference.

div.contain {
  display: grid;
  grid-template-rows: fit-content(20%) 45%;
  grid-template-columns: min-content auto;
  grid-template-areas:
        "btn title"
        "info info";
  gap: 10px;
}

.btn {
   grid-area: btn;
   aspect-ratio: 1 / 1;
   height: 10vh;
   border: 1px solid;
   
}

.title {
   grid-area: title; 
   border: 1px solid;
}

.info {
  border: 1px solid;
  grid-area: info;
}

<div class="contain">
  <div class="btn">Btn</div>
  <div class="title">Title</div>
  <div class="info">
    Normal Text
    <div>another div</div>
    <input>
  </div>  
</div>

Answer 1

Just add align-self: start to the info class

div.contain {
  display: grid;
  grid-template-rows: fit-content(20%) 45%;
  grid-template-columns: min-content auto;
  grid-template-areas:
        "btn title"
        "info info";
  gap: 10px;
}

.btn {
   grid-area: btn;
   aspect-ratio: 1 / 1;
   height: 10vh;
   border: 1px solid;
   
}

.title {
   grid-area: title; 
   border: 1px solid;
}

.info {
  border: 1px solid;
  grid-area: info;
  align-self: start; 
  padding:2px
}

<div class="contain">
  <div class="btn">Btn</div>
  <div class="title">Title</div>
  <div class="info">
    Normal Text
    <div>another div</div>
    <input>
  </div>  
</div>

Answer 2

I found the answer,

The input mark width value should be set. I set it to any percentage and it works fine

input {
  width: 50%;
}