Sample chat template message with image using html CSS

ChatHistoryTemplate.vue

<template>
  <div class="msg-history">
        <div class="incoming-msg-section">
          <div class="incoming-msg-img">
            <img src="https://ptetutorials.com/images/user-profile.png" alt="sunil">
          </div>
          <div class="incoming-msg-content">
            <div class="msg-card">
              <div class="msg-body">
                <p class="message">
                  Test which is a new approach to have all
                  solutions
                </p>
                <div class="msg-image">
                  <img src="/images/dummy-photo.jpg">
                </div>
              </div>
              <span class="time_date"> 11:01 AM | June 9</span>
            </div>
          </div>
        </div>
        <div class="outgoing-msg-content">
          <div class="msg-card">
            <div class="msg-body">
              <p class="message">
                Test which is a new approach to have all
                solutions
              </p>
              <div class="msg-image">
                <img src="/images/dummy-photo.jpg">
              </div>
            </div>
            <span class="time_date"> 11:01 AM    |    June 9</span>
          </div>
        </div>
    <div class="incoming-msg-section">
      <div class="incoming-msg-img">
        <img src="https://ptetutorials.com/images/user-profile.png" alt="sunil">
      </div>
      <div class="incoming-msg-content">
        <div class="msg-card">
          <div class="msg-body">
            <p class="message">
              There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration
              in
              some form, by injected humour, or randomised words which don't look even slightly believable. If you are
              going
              to use a passage of Lorem Ipsum, you need to be sure there isn't anything embarrassing hidden in the
              middle
              of
              text. All the Lorem Ipsum generators on the Internet tend to repeat predefined chunks as necessary, making
              this the first true generator on the Internet. It uses a dictionary of over 200 Latin words, combined with
              a
              handful of model sentence structures, to generate Lorem Ipsum which looks reasonable. The generated Lorem
              Ipsum is therefore always free from repetition, injected humour, or non-characteristic words etc.
            </p>
          </div>
          <span class="time_date"> 11:01 AM | June 9</span>
        </div>
      </div>
    </div>
    <div class="outgoing-msg-content">
      <div class="msg-card">
        <div class="msg-body">
          <p class="message">
            Test which is a new approach to have all
            solutions
          </p>
        </div>
        <span class="time_date"> 11:01 AM    |    June 9</span>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'MessageHistory'
}
</script>

<style lang="scss" scoped>
  /*---------chat window---------------*/
  .msg-history {
    height: 450px;
    max-height: 450px;
    overflow-y: auto;

    .incoming-msg-img {
      display: inline-block;
      width: 6%;
    }

    .incoming-msg-img img {
      width: 100%;
    }

    .incoming-msg-content {
      display: inline-block;
      padding: 0 0 0 10px;
      vertical-align: top;
      max-width: 70%;

      .msg-card {
        margin: 0;
        width: 100%;

        .msg-body {
          background: #EEEEEE none repeat scroll 0 0;
          border-radius: 0 15px 15px 15px;
          padding: 5px 10px 5px 12px;

          .message {
            color: #646464;
            font-size: 14px;
          }

          .msg-image img {
            max-width: 100%;
            border-radius: 10px;
          }
        }
      }
    }

    .outgoing-msg-content {
      overflow: hidden;
      margin: 26px 0 26px;

      .msg-card {
        float: right;
        max-width: 70%;
        margin: 0;

        .msg-body {
          background: #4285F4;
          padding: 5px 10px 5px 12px;
          border-radius: 12px 15px 15px 0;
        }

        .message {
          font-size: 14px;
          color: #fff;
        }

        .msg-image img {
          max-width: 100%;
          border-radius: 10px;
        }
      }
    }

    .time_date {
      color: #747474;
      display: block;
      font-size: 12px;
      margin: 8px 0 0;
    }
  }
</style>

qefw3fqw3q__