Is there a way to do this in CSS?-CodePudding

So I'm making an HTML based game. In this game, 5 words are chosen at complete randomness. Everything's fine, the code picks 5 words at random, and displays it on the screen, right?

Well I don't like the way the words end up getting styled, and it pretty much looks like this:

So the goal is to end up making the text look like this.

So far, I haven't tried anything because I didn't really know what to do, however the only one attempted using was inline-block, and it somewhat helped, but not to the full extent of how I want it. Here is the current source code:

<body>
  <div  id="content">
    <div  id="wordBank">
    </div>
  </div>
  <script src="script.js"></script>
</body>

var wordBank = document.getElementById("wordBank")
// sparing you some of the unneeded stuff, this is just the word array
for (let i = 0; i < 5; i  ) {
  wordBank.innerHTML  = "<p>"   words[Math.floor(Math.random()*words.length)]   "</p>"
}

    body {
      margin: 0px;
    }
    .content {
      width: 512px;
      height: 512px;
      margin-left: auto;
      margin-right: auto;
      font-family: Arial;
    }
    .wordBank {
      border: 2.5px solid black;
      border-radius: 5px;
      font-size: 24px;
    }

How can I achieve my goal effectively? Any help is appreciated.

CodePudding user response：

Try something like this: https://codepen.io/c_sharp_/pen/ZEvjvqg

HTML

<div >
    <span >multiply</span>
    <span >step</span>
    <span >kiss</span>
    <span >force</span>
    <span >ago</span>
</div>

CSS

.wrapper {
    display: flex;
    width: 100%;
    justify-content: space-between;
    height: 500px;
}
.even {
    align-self: flex-end;
}

The numbers are (obviously) placeholders and fit them as you like.