Hide partially obscured element using CSS

Question

Given:

<div class='row'>
  <div class='c1'>hello</div>
  <div class='c2'>bob</div>
</div>

<div class='row'>
  <div class='c1'>this is a very long test test bc a</div>
  <div class='c2'>bob</div>
</div>


<div class='row'>
  <div class='c1'>this is a very long test test test test test</div>
  <div class='c2'>bob</div>
</div>

CSS

.row .c1 {
  position: absolute;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 200px;
  z-index: 1;
  background-color: red;
}

.row .c2 {
  float: right;
  background-color: green;
}

.row {
  width: 200px;
  position: relative;
}

.row:after {
  clear: both;
  content: "";
  display: table;
}

Pen:

http://codepen.io/SamSaffron/pen/JtDHb

Is there some sort of fancy CSS (or HTML5 structure) that can cause c2 to hide itself as soon as the text in c1 starts overlapping?

Barring that, what is the best performing JavaScript hack to achieve this?

Answer 1

EDIT2: Changed the hiding mechanism to visibility:hidden, as per suggested by comments.

Here's a solution using jQuery. I'm working on a pure JS solution as well. The same logic should apply.

CodePen based on yours.

Basically if the width of c1 plus c2 is greater than the width of the row, hide c2. I added an overflow:hidden to the CSS for c2, and used .width(0) to hide it, since your c1 has position:absolute and so depends on c2 to provide the height for the row.

Hope that's what you needed.

EDIT: Here's the same solution in pure JavaScript. This assumes that every row has a c1 and a c2.

CodePen