JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="https://netdna.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
<div class="container">
  <div class="row">

    <!---MAIN COLUMN------>
    <div class="col-xs-12 col-md-6 col-sm-8 col-lg-6 col-centered">
      <h2>
            How to keep the text inside the div?
          </h2>

      <div class="mytext"> 
      
      fdsnkfhskghkgskghsdkghdskghdsklhgkdlsghdskhgkdshgdksghdsklghdskghkdslhgkdshgkdshgkdshgkdshgksdlhgksdhgkdslhgkdshgkdshgkdshgksdhgkldshgkdshgkldshgkhdsgkhdskghdskhgkdlshgkdshgkldshgkdshgklhdskghdskghdskl<small>
          
           </small>

      </div>


      <div>
        <div>
          <div>
            <div>

CSS

.mytext {
  word-wrap: break-all;
}