Expanding Right Text

Two boxes of text that will adjust their sizes based on the length of text in the right box.

by Travis Almand

HTML

<p>Change the text inside the inputs to change the left and right text. The right text will expand to the left as the text gets longer. If the left text gets long enough the sizes of the boxes will essentially switch.</p>

<input id='leftText' value='this is the description field' />
<input id='rightText' value='value' />

<div id='container'>
  <div id='right' class='truncate'>value</div>
  <div id='left' class='truncate'>this is the description field</div>
</div>

SCSS

input {
  display: block;
  margin: 10px;
  width: 200px;
}

#container {
  border: 1px solid black;
  box-sizing: border-box;
  font-size: 0;
  margin: 10px;
  width: 320px;
  
  #left,
  #right {
    box-sizing: border-box;
    font-size: 18px;
    height: 40px;
    line-height: 40px;
    padding: 0 10px;
  }
}
#left {
  border: 1px solid red;
  max-width: 75%;
  min-width: 25%;
}
#right {
  border: 1px solid blue;
  float: right;
  min-width: 25%;
  max-width: 75%;
  text-align: right;
}

.truncate {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

JavaScript

var $left = $('#left');
var $leftText = $('#leftText');
var $right = $('#right');
var $rightText = $('#rightText');

$leftText.on('input', function () {
	$left.text($leftText.val());
});
$rightText.on('input', function () {
	$right.text($rightText.val());
});