JSFiddle - React, Tailwind, and code Playground

HTML

<div class="container">
  <div class="flex-item">
    <button id="btnAcknowledge" title="Acknowledge" name="Acknowledge" type="submit">Acknowledged</button>
  </div>
  <div class="flex-item flex-item-right">
    <a id="btnCancel" class="medium right diminished cancel button" href="#">Decline and logoff</a>
  </div>
</div>

CSS

.container {
  display: flex; /* or inline-flex */
  background-color: red;
  flex-wrap: wrap;
  //flex-direction: row;
}

.flex-item {
  background-color: cornflowerblue;
  padding: 11px 15px 11px 15px;
  margin: 10px 0px 10px 0px;
  //width: 50%;
  //height: 100px;
  //margin: auto;
  //flex-grow:1;
  //flex: 1 100%;

}

.flex-item-right{
  background-color: cornflowerblue;
  margin-left: auto;
}

@media all and (max-width: 281px) {
 .flex-item {
    background-color: green;
    padding: 11px 15px 11px 15px;
    margin: 0px;
    //width: 100%;
    //height: 100px;
    //margin: auto;
    //flex-grow:1;
    flex: 1 100%;
    text-align: center;
    
  }

  .flex-item-right{
    background-color: green;
  }
}