title: text overflow issue in react
body: <p>when i'm trying to enter more text, the text overflows and appeared on horizontal line. here the line should automatically adjust as per the text</p>
  
  <pre><code>import React, { Component } from 'react';
  
  export default class App extends Component {
      constructor(props) {
      super(props);
      this.state = { items: [], text: '' };
      this.handleChange = this.handleChange.bind(this);
      this.handleSubmit = this.handleSubmit.bind(this);
  }
  
  render() {
      return (
          &lt;div&gt;
              &lt;form onSubmit  = {this.handleSubmit}&gt;
                  &lt;input onChange={this.handleChange} value={this.state.text} /&gt;
              &lt;/form&gt;
              &lt;div&gt;
                  &lt;TodoList items={this.state.items} /&gt;
              &lt;/div&gt;
          &lt;/div&gt;
      );
  }
  
  handleChange(e) {
      this.setState({ text: e.target.value });
  }
  
  handleSubmit(e) {
      e.preventDefault();
  
      if (!this.state.text.length) {
          return;
      }
  
      const newItem = {
          text: this.state.text,
      };
      this.setState(prevState =&gt; ({
          items: prevState.items.concat(newItem),
          text: ''
      }));
  }
  
  class TodoList extends React.Component {
      render() {
          return (
              &lt;div&gt;
                  {this.props.items.map(item =&gt; (
                      &lt;h3 key={item.id}&gt;{item.text}&lt;/h3&gt;
                  ))}
              &lt;/div&gt;  
          );
      }
  }
  </code></pre>
  
  <p>Any help would be appreciated, 
  thanks.</p>