Single Line ContentEditable

Starting point for creating JSFiddles with React. This uses React with Addons.

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.24/browser.js"></script>
<script src="https://npmcdn.com/react@latest/dist/react-with-addons.js"></script>
<script src="https://npmcdn.com/react-dom@latest/dist/react-dom.js"></script>
<script src="https://facebook.github.io/react/js/jsfiddle-integration-babel.js"></script>

<div id="container">
    <!-- This element's contents will be replaced with your component. -->
</div>

CSS

.single-line {
  float: right;
  white-space: nowrap;
  max-width: 400px;
  overflow: hidden;
  display: inline-block;
}

.without-kearn {
  font-feature-settings: "kern" 0;
}

.single-line br {
    display:none;
}

JavaScript 1.7

class HelloMessage extends React.Component {
  render() {
    return <div>
      <span contentEditable className="single-line">
        {"<div>changeme</div>"}
      </span>
      <br />
      <span contentEditable className="single-line without-kearn">
        {"<div>changeme</div>"}
      </span>
    </div>;
  }
}

ReactDOM.render(
  <HelloMessage name="World" />,
  document.getElementById('container')
);