How to position 2 divs? CSS-CodePudding

I would like to achieve this:

But I currently have this:

I would like the ">" vertically centre to the right.I am currently using a table to do so but i am unable to make the text float to the right on centre the icon.

My Html (I am using react):

<div className="biy">
            <table>
              <tr className=""></tr>
              <tr className=""></tr>
              <td className="biy-td-content">
                <p className="biy-title">{"Bible in a year :"}</p>
                <a className="biy-a" href={Data.bible_in_a_year_url}>
                  <p className="biy-p">{Data.bible_in_a_year_references}</p>
                </a>
              </td>
              <td className="biy-td-icon">
                <div className="biy-span-center">
                  <div className="biy-span">
                    <GrFormNext></GrFormNext>
                  </div>
                </div>
              </td>
            </table>
          </div>

My CSS:

.biy {
  background-color: var(--light);
  border-radius: 5px;
  margin-top: 16px;
  padding: 16px;
}

.biy-title {
  font-size: 1.1rem;
  margin: 0px;
  font-weight: 500;
}

.biy-p {
  font-size: 1.1rem;
  margin: 0px;
  color: var(--blue);
  font-weight: 550;
  margin-top: 8px;
}
.biy-a {
  text-decoration: none;
}

.biy-td-content {
  width: 96%;
}
.biy-td-icon {
  width: 4%;
}
.biy-span {
  margin: 0px;
  font-weight: 1000;
  font-size: 2rem;
  float: right;
}

.biy-span-center {
  position: fixed;
}

Please help me

CodePudding user response：

you should go for CSS grid instead of a table. When using grid-area you can position the 3 elements without any extra markup.

Matt

body {
  font-family: sans-serif;
  background: #F1F7FE;
}

.biy {
  display: grid;
  grid-template-columns: auto 24px;
  grid-template-areas:
    "label icon"
    "value icon";
  gap: 4px;
  width: 300px;
  padding: 16px;
  border-radius: 4px;
  background: #FFF;
}

.biy-label {
  grid-area: label;
}

.biy-link {
  grid-area: value;
  color: #56A4DC;
  text-decoration: none;
}

.biy-icon {
  grid-area: icon;
  align-self: center;
}

<div >
  <div >Bible in a year:</div>
  <a  href="">Exodus 34–35; Matthew 22:23–46</a>
  <svg  width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentcolor">
    <path d="M8 3L17 12L8 21" stroke-width="3" />
  </svg>
</div>