Change the position of text in HTML

June 30, 2022

Below is my HTML code that is working fine.
Just that I need to change the position of the texts here.
Basically, I have written a text like "Top Left" meaning this should be displayed Top left of the button and so on. Can anyone help me here?

<!DOCTYPE html>
<html>

<head>
  <style>
    .new {
      color: black;
    }

    .act_button {
      height: 20vh;
      width: 20vh;
      background-color: #ADD8E6;
      border: none;
      color: white;
      padding: 15px 32px;
      text-align: center;
      text-decoration: none;
      font-size: 16px;
      margin: 4px 2px;
      cursor: pointer;
    }
  </style>
</head>

<body>
  <button class="btn btn-default action-button act_button" id="show" type="button">
    <div class="new">Top-left Top Right Bottom left Bottom right<div>
  </button>
</body>

</html>

>Solution :

You can use a grid. This will be more robust when changing the dimensions of the button.

.act_button {
  background-color: #ADD8E6;
  border: none;
  display: grid;
  grid-template-columns: auto auto;
}

.act_button>span {
  padding: 5px;
}

<body>
  <button class="act_button" type="button">
      <span>Top left</span>
      <span>Top right</span>
      <span>Bottom left</span>
      <span>Bottom right</span>
  </button>
</body>