JSFiddle - React, Tailwind, and code Playground

by satantx

HTML

<form class="offer-send-form row" action="">
	<textarea class="form-control new-offer" name="" rows="1" placeholder="Добавить предложение..."></textarea>
	<button class="send-form2" type="submit">Отправить</button>
</form>

CSS

body {
    padding: 100px;
}

.offer-send-form {
	padding: 7px 7px 7px 5px;
	margin: 5px 0 0 0;
	background-color: #f1f1f1;
}
.offer-send-form > div {
	margin: 0;
	position: relative;
}
.offer-send-form textarea {
	-moz-border-radius: 0;
	-webkit-border-radius: 0;
	border-radius: 0;
	padding: 2px 5px 2px 15px;
	border: 1px solid #c0cad5;
	height: 27px;
}

.offer-send-form.open textarea {
    height: 100px;
}

JavaScript

$('body').click(function(e) {
    if($(e.target).closest('.offer-send-form').length==0) $('.offer-send-form').removeClass('open');
});

$('.offer-send-form').click(function(e) {
    $(this).addClass('open');
});