How to align icon with element instead of element text

Question

I have a svg icon and a span element side by side. When the text overflows inside the span element, the svg also comes down along with it. I don't want it to happen.

Here is a of what I'm doing.

As you can see, the arrow icon is proper in Section 1 but in Section 2, it comes down with the text.

Here is the HTML code -

.rightContent {
  border: 2px solid green;
  height: 100vh;
  overflow-y: scroll;
}

.sectionHeading {
  background: #f7f9fa;
  text-align: left;
  font-family: sf pro display, -apple-system, BlinkMacSystemFont, Roboto, segoe ui, Helvetica, Arial, sans-serif, apple color emoji, segoe ui emoji, segoe ui symbol;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -.02rem;
  font-size: 1rem;
  padding-top: .75rem;
  padding-bottom: 1.05rem;
}

.sectionHeading p {
  padding: 0;
  margin: 0;
}

.sectionHeading svg {
  float: right;
}

.sectionHeading small {
  font-size: 0.75rem;
  font-weight: 500;
}

<div class="rightContent col col-lg-3 col-md-3 sol-sm-3" style="border: 2px solid green;">
  <!-- Section 1: Introduction -->
  <div class="row">
    <div class="card">
      <div class="sectionHeading">
        <span>Section 1: Introduction</span>
        <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-caret-down" viewBox="0 0 16 16">
                                <path d="M3.204 5h9.592L8 10.481 3.204 5zm-.753.659 4.796 5.48a1 1 0 0 0 1.506 0l4.796-5.48c.566-.647.106-1.659-.753-1.659H3.204a1 1 0 0 0-.753 1.659z"/>
                            </svg>
        <p></p>
        <small>14 / 14 | 1hr 5min</small>
      </div>
    </div>
  </div>

  <!-- Section 2: Experience -->
  <div class="row">
    <div class="card">
      <div class="sectionHeading">
        <span>Section 2: Experiences In The Corporate World</span>
        <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-caret-down" viewBox="0 0 16 16">
                                <path d="M3.204 5h9.592L8 10.481 3.204 5zm-.753.659 4.796 5.48a1 1 0 0 0 1.506 0l4.796-5.48c.566-.647.106-1.659-.753-1.659H3.204a1 1 0 0 0-.753 1.659z"/>
                            </svg>
        <p></p>
        <small>19 / 19 | 2hr 15min</small>
      </div>
    </div>
  </div>

Most of the questions already present deal with aligning icons with text, but as I mentioned earlier, I want to align icons with span element and keep it fixed there, instead of aligning it with text.

Please feel free to share your inputs. I'll be grateful to learn from others since I'm still learning CSS. Thank you.

Answer 1

Please set max-width or width of span tag. As width svg tag is 16px, you can set that max-width of is calc(100% - 16px).

Try it

<style>
.sectionHeading span{
    display: inline-block;
    max-width: calc(100% - 16px);
}
</style>

Answer 2

1. You had a few small problems like an empty p tag which I fixed.
2. I wrapped small & span tags in a container and Since you're using bootstrap, I added d-flex justify-content-between classes to sectionHeading. This fixed the problem.

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box
}

.rightContent {
  border: 2px solid green;
  height: 100vh;
  overflow-y: scroll;
}

.sectionHeading {
  background: #f7f9fa;
  text-align: left;
  font-family: sf pro display, -apple-system, BlinkMacSystemFont, Roboto, segoe ui, Helvetica, Arial, sans-serif, apple color emoji, segoe ui emoji, segoe ui symbol;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -.02rem;
  font-size: 1rem;
  padding-top: .75rem;
  padding-bottom: 1.05rem;
}

.sectionHeading p {
  padding: 0;
  margin: 0;
}

.sectionHeading svg {
  float: right;
}

.sectionHeading small {
  font-size: 0.75rem;
  font-weight: 500;
}

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">

<div class="rightContent col col-lg-3 col-md-3 sol-sm-3" style="border: 2px solid green;">
  <!-- Section 1: Introduction -->
  <div class="row">
    <div class="card">
      <div class="sectionHeading d-flex justify-content-between">
        <div>
          <span>Section 1: Introduction</span><br/>
          <small>14 / 14 | 1hr 5min</small>
        </div>
        <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-caret-down" viewBox="0 0 16 16">
                                <path d="M3.204 5h9.592L8 10.481 3.204 5zm-.753.659 4.796 5.48a1 1 0 0 0 1.506 0l4.796-5.48c.566-.647.106-1.659-.753-1.659H3.204a1 1 0 0 0-.753 1.659z"/>
                            </svg>
      </div>
    </div>
  </div>

  <!-- Section 2: Experience -->
  <div class="row">
    <div class="card">
      <div class="sectionHeading d-flex justify-content-between">
        <div>
          <span>Section 2: Experiences In The Corporate World</span><br/>
          <small>19 / 19 | 2hr 15min</small>
        </div>
        <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-caret-down" viewBox="0 0 16 16">
                                <path d="M3.204 5h9.592L8 10.481 3.204 5zm-.753.659 4.796 5.48a1 1 0 0 0 1.506 0l4.796-5.48c.566-.647.106-1.659-.753-1.659H3.204a1 1 0 0 0-.753 1.659z"/>
                            </svg>
      </div>
    </div>
  </div>

Answer 3

In your case the best choice is using positions,using your .sectionHeading or.card as the relative element.

Try it:

.sectionHeading { /* you can also use your div .card */
   position: relative;
}

svg { /* here you can also use a class name */
  position: absolute;
  top: 0;
  right: 0;
}

Be in mind that maybe you will need to add a padding to your relative element, otherwise your svg will be leaning the border.