I am passing a Component with different text present in an array using map() but it is giving me this output.

I want all to be in a straight line having same height of each component without depending on content. How do I fix this?

Sandbox Link

CodePudding user response：

Just add a verticalAlign: "middle" to your Box style.

However, I would recommend using Flexbox with justify-content and/or align-items.

Edit: Simple example with flexbox:

html, * {
  box-sizing: border-box;
}
.row {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 6rem;
  padding: 1em;
}

.box {
  width: 8rem;
  height: 100%;
  margin: 0.75rem;
  padding: 0.75%;
  text-align: center;
  border-radius: 4px;
  box-shadow: 0px 3px 5px -1px rgba(0,0,0,0.2),0px 5px 8px 0px rgba(0,0,0,0.14),0px 1px 14px 0px rgba(0,0,0,0.12);
}

<div class="row">
  <div class="box">Multiple Words to continue</div>
  <div class="box">words</div>
  <div class="box">Multiple Words to continue</div>
  <div class="box">words</div>
<div>

<iframe name="sif1" sandbox="allow-forms allow-modals allow-scripts" frameborder="0"></iframe>