column becomes similar to row when too much text is written inside

Question

I'm developing a practice app with some messages and when I'm trying to add style to the message happens this issue.

In my example I have the profile picture of the user and at the side the message, but when I type too much the side column gets under the picture and kind of becomes a row (still being a column though) but what I need is the column of the message to respect the space of the profile picture and continue below instead of moving below the picture.

I'll post an image and the code I'm using

IMAGE:

CURRENT CODE

    export default function Messages() {
    return (
      <div name="MessagesContainer" className="col">
        <div className='container align-items-center'>
          <div className='row align-items-center text-center'>
            <div name="TalkingWith" className='col-sm-1'>
              <Link to="#" className='text-decoration-none'>
              <img src="/assets/profilepics/profilepic1.png" alt="" name="Contact User Picture"
              className='rounded element-shadow' data-bs-toggle="tooltip" 
              data-bs-placement="bottom" title="Profile" height="50" width="50"/>
            </Link>
        </div>
          <div className='col-sm-2'> 
            <span name="UserName"className='align-middle text-dark fw-bolder fs-5 ms-0'>John Doe</span>
          </div>
        </div>
      </div>
      <hr className="mx-auto text-center" style={{width:500}}/>

    <div name="MessagesExchange" className='container-fluid'>

    <div className="container-fluid position-sticky">
  <div className="row">
    <div className="col-md-auto ms-2 p-0">
    <Link to="#">
        <img src="/assets/profilepics/profilepic1.png" alt="" name="Contact User Picture"
          className='rounded element-shadow border border-white' data-bs-toggle="tooltip" 
          data-bs-placement="bottom" title="Profile" height="30" width="30"/>
      </Link>
    </div>
    <div id="MessageBody" className="col-11 bg-light bg-gradient position-sticky rounded-2 align-items-right border border-0 element-

    shadow p-1 px-2 text-right mb-3">
          <label name="Message" className='text-wrap '>Hi!, i sent you a message! asdkjahdjdhwadhadhawuodawdhwudhnwdunhwa87dgvb7abdynugdcawvdbcauwkjdaghwuegwwwwwbd3ungedy3w</label>
            </div>
    
      </div>
    </div>
    
        <div className='row float-end ms-1'>
          <div name="MessageBody" className="col-md-auto message-sent bg-gradient rounded-3 border border-0 element-shadow p-1 px-2 mb-3">
            <label name="Message" className='text-wrap text-right'>Hi!, i responded your message aaaaaaaaaasdasddaddadadas</label>
          </div>
          <Link to="#" className='col-sm-1 float-end ms-2'>
            <img src="/assets/profilepics/profilepic3.png" alt="" name="Contact User Picture"
              className='rounded element-shadow border border-white me-0' data-bs-toggle="tooltip" 
              data-bs-placement="bottom" title="Profile" height="30" width="30"/>
          </Link>
        </div>
        
    </div>
      <div className="input-group border border-white rounded mb-2">
        <input name="Searchbar" placeholder="Type a message" className="element-shadow border border-0 bg-white form-control" style={{width : '25%'}}/>
          <button className="btn btn-info bg-gradient border border-white shadow-sm rounded-end py-2" data-bs-toggle="tooltip" title="Press here to search">
            <i className="fa-solid fa-keyboard text-white align-middle bg-transparent"></i>
          </button>
      </div>
    </div>
  )
}

EDIT

after testing the answer by Isherwood now when i type too much this is how it looks

the desired result would be a combination of the two example messages, that the message box to be text-width and that if i type a long amount of characters that breaks line but does not get under the contacts, also i'll update the code and i'll add more so you can have more info.

Answer 1

Here's a wild guess at what you're after and some validation fixes. I don't know whether you really want a 1-unit column for your image, though. Something more fluid might be better.

1. Use a container around rows.
2. Move sticky positioning to the container.
3. Make all row children columns.
4. If your first column is 1 unit in size, the second should probably be 11.
5. Anchors shouldn't be columns. They should be inside the structural layout.
6. Divs and images don't have name attributes. Use IDs if you need to query for them later or whatever.

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/css/bootstrap.min.css" integrity="sha384-xOolHFLEh07PJGoPkLv1IbcEPTNtaed2xpHsD9ESMhqIYd0nLMwNLD69Npy4HI+N" crossorigin="anonymous">

<div class="container-fluid position-sticky">
  <div class="row">
    <div class="col-1">
      <a href="#" class='text-decoration-none'>
        <img src="https://via.placeholder.com/100" alt="Contact User Picture" class='rounded element-shadow border border-white' data-bs-toggle="tooltip" data-bs-placement="bottom" title="Profile" height="30" width="30" />
      </a>
    </div>

    <div id="MessageBody" class="col-11 bg-light bg-gradient position-sticky rounded-2 align-items-right border border-0 element-shadow p-1 px-2 text-right mb-3">
      <label name="Message" class='text-wrap '>Hi!, i sent you a message! aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaadasdadadsadadadadadasasdsdads</label>
    </div>
  </div>
</div>