Move element into a new row into the same div

July 21, 2023

I have the following code snipet:

.text {
  font-family: Arial, Helvetica, sans-serif;
  &__title {
    font-weight: 700;
    color: #000000;
  }

  &__alternate-text {
    color: #ffff;
  }

  &__clock-hour {
    font-size: 22px;

    &--sub {
      margin-left: 10px;
      font-size: 14px;
    }
  }
}


.table-layout {
  table-layout: fixed;
}

.bordered-element {
  display: flex;
  border: 2px solid #7a7878;
  border-radius: 10px;
}

.bordered-element > * {
  display: flex;
  align-items: center;
  padding: 1.5rem 1rem;
}

.bordered-element > :first-child {
  border-right: 1px solid #7a7878;
}

.bordered-element > :last-child {
  flex-grow: 2;
}

.content label {
  max-width: 120px;
  min-width: 0;
}

.bordered-element ul {
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
}
.bordered-element li {
  text-align: center;
  list-style: none;
  background-color: #3da3d3;
  border-radius: 6px;
  padding: 2px;
  min-width: 2.5rem;
  margin: 0.2rem;
}

<table class="table table-layout borderless">
            <thead>
              <tr>
                <th>Title 1</th>
                <th>Title 2</th>
              </tr>
            </thead>
            <tbody>
              <tr>
                <td colspan="2">
                  <div class="bordered-element">
                    <div>
                      <label class="text text__clock-hour">08:30 AM</label>
                      <label class="text text__clock-hour--sub">CDT</label>
                      <p>10 / 23 / 2023</p>
                    </div>
                    <ul>
                      <li class="text text__alternate-text">AB</li>
                      <li class="text text__alternate-text">BC</li>
                    </ul>
                  </div>
                </td>
                <td></td>
              </tr>
            </tbody>
          </table>

I only want to move the element <p>10 / 23 / 2023</p> into a new row of the same div. I tried using p,span,label, also adding a display:block class, but none of them work; how can I do that?

Expected result:

Also, if I add a div, the text goes over the next column, and I want it to stay in the same one.

How can I achieve this?

>Solution :

You can change the CSS property setting for display of the div to block and also insert a line break html tag.

For example:

.text {
  font-family: Arial, Helvetica, sans-serif;
  &__title {
    font-weight: 700;
    color: #000000;
  }
  &__alternate-text {
    color: #ffff;
  }
  &__clock-hour {
    font-size: 22px;
    &--sub {
      margin-left: 10px;
      font-size: 14px;
    }
  }
}

.table-layout {
  table-layout: fixed;
}

.bordered-element {
  display: flex;
  border: 2px solid #7a7878;
  border-radius: 10px;
}

.bordered-element>* {
  display: block;
  align-items: center;
  padding: 1.5rem 1rem;
}

.bordered-element> :first-child {
  border-right: 1px solid #7a7878;
}

.bordered-element> :last-child {
  flex-grow: 2;
}

.content label {
  max-width: 120px;
  min-width: 0;
}

.bordered-element ul {
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
}

.bordered-element li {
  text-align: center;
  list-style: none;
  background-color: #3da3d3;
  border-radius: 6px;
  padding: 2px;
  min-width: 2.5rem;
  margin: 0.2rem;
}

<table class="table table-layout borderless">
  <thead>
    <tr>
      <th>Title 1</th>
      <th>Title 2</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td colspan="2">
        <div class="bordered-element">
          <div>
            <label class="text text__clock-hour">08:30 AM</label>
            <label class="text text__clock-hour--sub">CDT</label>
            <br>
            <p>10 / 23 / 2023</p>
          </div>
          <ul>
            <li class="text text__alternate-text">AB</li>
            <li class="text text__alternate-text">BC</li>
          </ul>
        </div>
      </td>
      <td></td>
    </tr>
  </tbody>
</table>