flex布局，聊天应用中输入框怎么把img表情和文字排版的整齐些

如上图：

CSS部分：

.editor-{
float: left;
width: calc(100% - (46px * 3) - 20px);
outline: none;
min-height: 30px;
max-height: 120px;
padding: 0px 10px;
margin: 7px 0;
margin-left: 5px;
line-height: 30px;
box-sizing:border-box;
border:1px solid #eee;
border-radius: 4px;
display: inline-flex;
flex-wrap: wrap;
font-size:16px;
}
我这里插入图片是，往输入的文字后面插入img，每个表情大概30px的宽高；

输入框的高度按照输入文字多少来改变，最高是100px；

这里有点小问题，图片后面有时候不知道是不是宽度不够排字了？

勉强能看，也就行了