title: Text in Semantic UI React is breaking the grid only from the right side
body: <p>In Semantic UI React, I defined a grid that has two columns. If the content is long it does not break to the next line but breaking its column border to the next column. Why is this happening? is it a bug in my or Semanic UI React code?</p>
  <p><a href="https://i.stack.imgur.com/DBJkz.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/DBJkz.png" alt="enter image description here" /></a></p>
  <p>Here is the corresponding code:</p>
  <pre><code>&lt;Grid key={experience.id}&gt;
    &lt;Grid.Column mobile=&quot;12&quot; tablet=&quot;13&quot; computer=&quot;14&quot;&gt;
      {experienceRoleStyle(experience.role)}
      {experienceCompanyStyle(experience.company)}
      {experienceDateStyle(getRandomDate())}
      &lt;p className=&quot;mt-3&quot;&gt;
        xsluixisxkhsbkxgsvkxgvsytxvkusybxkyhbsxlsunxsbhxybxsklnjxkshbkxuvsxxkshbkxjhbskuxvksvbxkhjbsjlhbxljhsbxkjhbskxhbslxsxsxsiyxhsiygxbukysbx
      &lt;/p&gt;
    &lt;/Grid.Column&gt;
    &lt;Grid.Column mobile=&quot;4&quot; tablet=&quot;3&quot; computer=&quot;2&quot;&gt;
      &lt;Icon
        name={experience.company.toLowerCase()}
        floated=&quot;right&quot;
        size=&quot;huge&quot;
      /&gt;
    &lt;/Grid.Column&gt;
  &lt;/Grid&gt;
  </code></pre>