title: Responsive text input beside image with fixed size in HTML and CSS
body: <p>I am developing a website. Now I am beautifying my website. Now I am having a problem with designing my website.</p>
  
  <p>This is something what I want to achieve</p>
  
  <p><a href="https://i.stack.imgur.com/3LH9t.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/3LH9t.png" alt="enter image description here"></a></p>
  
  <p>As you can see in the higlighted area, there is a image and textarea in the div. I want to get it responsive. I mean, it will have the max-width, when the user low down the screensize, it will become smaller, but it has min-width. I mean the parent div is not fixed size. It will be changing.</p>
  
  <p>But I always want them stay side by side. But the image will always have fixed size. It will never change no matter screen size is changing. But only the text input field will be responsive according to the parent. Here is my code:</p>
  
  <p>This is my HTML</p>
  
  <pre><code>  &lt;div&gt;
      &lt;div class="comment-form"&gt;
           &lt;img class="comment-avatar" src="/Images/user_avatar.png" /&gt;
           &lt;textarea placeholder='Please log in first' class="comment-textarea"&gt;&lt;/textarea&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  </code></pre>
  
  <p>This is my CSS</p>
  
  <pre><code>.comment-form{
      padding:5px;
      border:1px solid #CFD8DC;
      width:100%;
      min-width:280px;
      max-width:490px;
  }
  
  .comment-avatar{
      width:60px;
      height:54px;
      object-fit:cover;
      border:1px solid #CFD8DC;
  }
  
  .comment-textarea{
      width:86%;
      display:inline-block;
      border-radius:0px;
      height:54px;
  }
  </code></pre>
  
  <p>As you can see in the css, I am making comment-form responsive setting width to 100% with min-width and max-width. The avatar image will have the fixed size. The problem is setting the width of the textarea. I always want image and textarea side by side. I want textarea takes the rest of the form area. So I set its width with percentage. As you can see, now width is 86%. If I set it to 100%, form became something like below.</p>
  
  <p><a href="https://i.stack.imgur.com/3OrRn.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/3OrRn.png" alt="enter image description here"></a></p>
  
  <p>But with current code, I get like the first image. But when I resize the screen, it becomes something like this.</p>
  
  <p><a href="https://i.stack.imgur.com/UXNOu.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/UXNOu.png" alt="enter image description here"></a></p>
  
  <p>They are not side by side any more. So my current code is not responsive. What I want to make is I want image always fixed side and want textarea takes the rest or remaining area of form-container no matter what screen size is changed to.</p>