JSFiddle - React, Tailwind, and code Playground

HTML

<div class="olo" id="olo_1" contenteditable="true" data-placeholder="Имя"></div>
<div class="olo" id="olo_11" contenteditable="true" data-placeholder="Имя"></div>
                    <div class="q1" onClick="set2()">
                    	кнопка1
                    </div>
                    <div class="q2" onClick="set1()">
                    	кнопка2
                    </div>

CSS

.olo{
	min-height:110px;
	border: none; 
	font-size:18px;
	background:#D8D4D4;
	overflow:auto;
    margin-bottom:20px;
}
.q1{																		background:#6BD982;																	cursor:pointer;
}																																.q2{																		background:#CB4C7B;																cursor:pointer;
}
div[data-placeholder]:not(:focus):not([data-div-placeholder-content]):before {
  content: attr(data-placeholder);
}
[contenteditable=false]:empty:before{
  content: attr(placeholder);

}

JavaScript

(function ($) {
	$(document).on('change click keydown keypress input', 'div[data-placeholder]', function() {
		if (this.textContent) {
			this.dataset.divPlaceholderContent = 'true';
		}
		else {
			delete(this.dataset.divPlaceholderContent);
		}
	});
})



function set2(){
    $('olo_11').dataset.divPlaceholderContent = '';
    document.getElementById('olo_11').innerHTML='<b>новое</b>';
 }


function set1(){
    $('olo_1').dataset.divPlaceholderContent = '';
    document.getElementById('olo_1').innerHTML='<b>старое</b>';
 }