JSFiddle - React, Tailwind, and code Playground

by lasha

HTML

<div class="container">
    <span class="left">asdasd sdfsdf:</span> <span class="right">asdkjh asj kdhakjs dhaskj hasdkj hdjask hdkja shdjk hasjkdhajks dhajksh dkjas hdkjas hdjkash dkjadhs</span>
</div>
<div class="container">
    <span class="left">asdasd sdfsdf asdasdasdasd:</span> <span class="right">asdkjh asj kdhakjs dhaskj hasdkj hdjask hdkja shdjk hasjkdhajks dhajksh dkjas hdkjas hdjkash dkjadhs</span>
</div>
<div class="container">
    <span class="left">asdasd:</span> <span class="right">asdkjh asj kdhakjs dhaskj hasdkj hdjask hdkja shdjk hasjkdhajks dhajksh dkjas hdkjas hdjkash dkjadhs</span>
</div>

CSS

.container {
    display: block;
    white-space: nowrap;
    overflow: hidden;
    width: 100%;
    margin-bottom: 5px;
    position: relative;
}

/* .container {
	display: -webkit-flex;
	display: -moz-flex;
	display: flex;
	-webkit-flex-flow: row nowrap;
	-moz-flex-flow: row nowrap;
	flex-flow: row nowrap;
} */

.left, .right {
    display: inline-block;
    vertical-align: top;
}
.right {
    white-space: normal;
    color: #aaa;
}
.left {
    position: absolute;
}

/* .left, .right {
    -webkit-flex: initial;
	-moz-flex: initial;
	flex: initial;
}
 */

JavaScript

var currKey = '<div id="exportSearch" class="container"><span class="left">Search KeyWord:</span>';
					currKey += ' <span class="right">' + 'adsasdasd asdads asdasdasd asdasd asdasdas dasdasda dasdasdasdasda' + '</span></div>';

$("body").append(currKey);

$(".container").each(function(i, el){
    var $this = $(this);
    var keyWidth = $this.find(".left").outerWidth();
    $this.find(".right").css("margin-left",keyWidth + 5);
});