JSFiddle - React, Tailwind, and code Playground

HTML

<div data-role='main' class='ui-content' id='collapse'>
  <div data-role='collapsible' data-theme='b' data-content-theme='b' data-iconpos='right' data-expanded-icon='collapse' data-collapsed-icon='expand'>
    <h4> <a href='#' data-rel='back' data-role='button' data-icon='delete' data-iconpos='notext' style='position:absolute;top:-20px;right: -10px'>Close</a> <div class='ui-grid-a'> <div class='ui-block-a textfloatleft' > 1 new </div><div class='ui-block-b textfloatright'>January 6th 2016</div> </div><span id='collapstxt'> first </span> <button href='#' id='bt01' data-icon='check' data-iconpos='right' style='width:100px;' onclick='alert(1);event.stopPropagation();' >Reply</button></h4>
    <ul data-role='listview'>
      <li id='answerstyle'><span id='answerstxt'> first </span>
        <div class='ui-block-b answrfloatright'>January 6th 2016</div>
      </li>
      <li id='answerstyle'>Audi</li>
      <li id='answerstyle'>BMW</li>
      <li id='answerstyle'>Cadillac</li>
      <li id='answerstyle'>Ferrari</li>
    </ul>
  </div>
</div>

CSS

.titlefloatright {
  float: right;
  text-align: right;
  overflow: visible;
}


/*CSS collapsible for collapsible number of new responses. */

.titlefloatleft {
  float: left;
  padding-left: 10px;
  overflow: visible;
}

a.ui-collapsible-heading-toggle.ui-btn.ui-icon-expand.ui-btn-icon-right.ui-btn-b {
  overflow: visible;
}