JSFiddle - React, Tailwind, and code Playground

by ponyspy

HTML

<div class="outer">
	<div class="translate_block">
		<div class="translate_direction">
			<button class="del_translate">x</button>
			<select class="lang_src">
				<option value="ru">ru</option>
				<option value="en">en</option>
				<option value="fr">fr</option>
			</select>
			<span>---></span>
			<select class="lang_dest">
				<option value="en">en</option>
				<option value="ru">ru</option>
				<option value="fr">fr</option>
			</select>
		</div>
		<div class="translate_columns">
			<div class="column left" contenteditable>111</div>
			<div class="column right">222</div>
		</div>
	</div>
	<button class="add_translate">add translate</button>	
</div>

CSS

html, body {
	margin: 0;
	padding: 0;
}

.outer {
	padding: 10px;
}

.translate_block {
	margin-bottom: 25px;
}

.del_translate {
	position: absolute;
	left: 0;
}

.translate_direction {
	width: 100%;
	text-align: center;
	padding: 10px;
	box-sizing: border-box;
	position: relative;
}

.translate_columns {
	overflow: hidden;
}

.column {
	min-height: 60px;
	width: 50%;
	float: left;
	outline: 0;
}

.column.left {
	background-color: rgba(220, 219, 216, 1.000);	
}

.column.right {
	background-color: rgba(235, 235, 236, 1.000);	
}

JavaScript

$(document).on('click', '.del_translate', function(e) {
	$(this).closest('.translate_block').remove();
});

$('.add_translate').on('click', function(e) {
	var $last_translate = $('.translate_block').last();
	
	$last_translate.clone().insertAfter($last_translate);
});