Data inside the width of container, While having other CSS styling intact

I need to have the data inside the width of my container. While having other css styling intact.
Have trouble achieving the same. Would appreciate your help.

Working fiddle of the same: http://jsfiddle.net/nco694Le/

Below Big word here goes outside the width of container

Html:

<div class="container">
  <p class ="collapse">data1 <span class ="DataRightAlign"> small </span ></p>
  <p class ="collapse">data2 <span  class ="DataRightAlign"> small</span></p>
  <p class ="collapse">data3 <span  class ="DataRightAlign"> big word here</span></p> 
</div >

Css:

.container{
  width: 110px;
  border-style: ridge;  
}

.collapse {
  display: flex !important;
  align-items: flex-end !important;
}

.collapse:after {
  content: '' !important;
  flex: auto !important;
  min-width: 24px !important;
  margin: 0 6px !important;
  height: 2px !important;
  color: lightgrey !important;
  font-weight: 900 !important;
  margin-bottom: 4px !important;
  background-image: linear-gradient(to right,currentColor 2px,transparent 1px) !important;
  background-size: 4px 2px !important; 
}

.DataRightAlign {
  flex: none;
}

.DataRightAlign:last-child {
  order: 1;
  text-align: right;
}

>Solution :

Here is the solution I came up with to fit the data inside of the container. It was just a matter of increasing the width property of the container. I also added some padding.

.container{
  width: 110px;
  border-style: ridge;
}

.collapse {
  display: flex !important;
  align-items: flex-end !important;
}

.collapse:after {
  content: '' !important;
  flex: auto !important;
  min-width: 24px !important;
  margin: 0 6px !important;
  height: 2px !important;
  color: lightgrey !important;
  font-weight: 900 !important;
  margin-bottom: 4px !important;
  background-image: linear-gradient(to right,currentColor 2px,transparent 1px) !important;
  background-size: 4px 2px !important; 
}

.DataRightAlign {
  flex: none;
  word-wrap: break-word;
  white-space: break-spaces;
  max-width: 30%;
}

.DataRightAlign:last-child {
  order: 1;
  text-align: right;
}

<div class="container">
  <p class ="collapse">data1 <span class ="DataRightAlign"> small </span ></p>
  <p class ="collapse">data2 <span  class ="DataRightAlign"> small</span></p>
  <p class ="collapse">data3 <span  class ="DataRightAlign"> big word</span></p> 
</div>

EDIT: I have added word-wrap and white-space properties to DataRightAlign as well as an explicit width property. This should work.