Semantic UI , two column grid with right-side grid containing multiple inline divs tags

Question

This should be easy, but for some reason I must be missing something super basic.

Using Semantic UI

I have a simple two column grid. The first column on the left is called profileInfo and the column on the right is called profileData. The profileData contains multiple divs that are using "ui card" class. The divs all appear on a separate line and they are not inline. I have tried to set the ui card class to display:inline-block and also tried using the float: left, but this is not working.

The data in the profileData column is dynamic, so sometimes maybe 1 ui card or could be 10 ui cards. But either way I want them to be inline and continue. I dont want each ui card on a separate line. Hopefully this is not too confusing. Much appreciated for any input.

<div class="ui two column centered grid">
<div class="row">
  <div id = "profileInfo" class="column">
      <!-- some stuff in here -->
  </div>

  <div id = "profileData" class="column">
      <div class = "ui card">
      <div class = "ui card">
      <div class = "ui card">
  </div>
</div>
</div>

Thanks!

Answer 1

Try wrapping your "ui card" in a div called "ui cards":

<div class="ui two column centered grid">
<div class="row">
  <div id = "profileInfo" class="column">
      test
  </div>

  <div id = "profileData" class="column">
    <div class="ui cards">
      <div class = "ui card">test</div>
      <div class = "ui card">test</div>
      <div class = "ui card">test</div>
    </div>
  </div>
</div>
</div>

ui.card is set to display flex, inline-block could work but your style might be overwritten due to browser-prefixes.

To achieve 3 in a row you could override the px width that is on them:

.ui.cards>.card { width:31%; }

Codepen

Answer 2

I was able to resolve the issue!

Very easy, I had to remove the extra div containing a class of 'ui container'.