JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.1.7/semantic.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.1.7/semantic.min.js"></script>
<div class="ui singleImg container">
    <div class="ui hidden divider"></div>
    <div class="ui two column stackable grid">
      <div class="eleven wide column">
          <h1 class="ui dividing header">Test</h1>
      </div>
      <div class="five wide column">
        <div class="ui fluid teal button" data-title="Using click events" data-content="Clicked popups will close if you click away, but not if you click inside the popup">Download</div>
        Sidebar
      </div>
 
    </div>
</div>

CSS

body {
  font-family: "Open Sans", "Helvetica Neue", "Helvetica", "Arial", sans-serif;
  padding: 0;
  margin: 0;
}

.ui.singleImg.container {
  max-width:1080px !important;
}

JavaScript

<script>
	$('.teal.button')
	  .popup({
		on: 'click'
	  })
	;
</script>