Help with alignments

How can i get the assign button to sit next to the task text? Thanks. Here is the relevant code

<div id="gallery">
        <div class="card center">
            <h3>Destroy Humanity</h3>
            <button id="assign-button" style="vertical-align:middle"><span>Assign</span></button>
        </div>
</div>
#gallery {
  display: flex;
  flex-direction: column;
  justify-content: center;
  text-align: justify;
}

.card {
  box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);
  transition: 0.3s;
  width: 200px;
  margin: 30px;
  background-color: #FFFFFF;
  border-radius: 5px;
}

.center {
  align-self: center;
  padding-top: 1em;
  padding-bottom: 1em;
  padding-left: 1em;
  padding-right: 10em;
  border-radius: 5px;
  margin: 10px !important;
}

#assign-button {
  display: inline-block;
  border-radius: 4px;
  background-color: #2e5266;
  border: none;
  color: #FFFFFF;
  text-align: center;
  font-size: 20px;
  transition: all 0.5s;
  cursor: pointer;
  margin: 5px;
  padding: 5px;
  width: 100px;
}

The easiest way is to give give either card or center classes display:flex;

Only problem now is the task gets squished and humanity is pushed to another line.

WIll be helpful if you share your demo instead of screenshots.

If you give flex:1; to the children element. Each will take half size of the flexbox.

Hit inspect elements to see what’s going on too.

I was able to solve it thank you!