How do I make input field and an image come in same line?

Question

I am trying to make this input field come in the same line as the image please help here is the output and the code

<img class="comment-profile-pic" src="https://drgsearch.com/wp-content/uploads/2020/01/no-photo.png" alt="">
<input type="text" class="post-comment">
CSS:
.comment-profile-pic
{
    border-radius: 50%;
    width: 50px;
}

[Output] [1]: https://i.stack.imgur.com/Zd0ww.png

Check this Maybe Help You out! https://stackoverflow.com/questions/917610/put-icon-inside-input-element-in-a-form — DineshMsd, Aug 09 '21 at 14:46

score 2 · Accepted Answer · answered Aug 09 '21 at 14:43

You can put img and input in flex div :

.comment-profile-pic {
  border-radius: 50%;
  width: 50px;
}
.wrapper {
  display: flex;
  align-items: center;
}

<div class="wrapper">
  <img class="comment-profile-pic" src="https://drgsearch.com/wp-content/uploads/2020/01/no-photo.png" alt="">
  <input type="text" class="post-comment">
</div>

score 1 · Answer 2 · answered Aug 09 '21 at 14:43

1

use flexboxs, wrap both items in a div and then add a class with display:flex

answered Aug 09 '21 at 14:43

Skin_phil

596
5
18

score 1 · Answer 3 · edited Jul 24 '22 at 04:48

You can also do, that image and input top would be in the same line.

<html>
<head>
<title>Example</title>
<style>
    .comment-profile-pic {
        width: 100px;
    }

    .one-line {
        display: flex;
        align-items: top;
    }

    input {
        height: 25px;
    }
</style>
</head>
<body>
<div class="one-line">
    <img class="comment-profile-pic" src="https://drgsearch.com/wp-content/uploads/2020/01/no-photo.png" alt="">
    <input type="text" class="post-comment">
</div>
</body>
</html>

How do I make input field and an image come in same line?

3 Answers3