Get corresponding element in second <div>

I have this format.

<div class="container" style="display: flex;">
	<div style="width: 25%;">
		<div class="collapsible-title is-active">Title 1
			<i class="fas fa-solid fa-chevron-right"></i>
		</div>
		<div class="collapsible-title">Title 2
			<i class="fas fa-solid fa-chevron-right"></i>
		</div>
	</div>
	<div style="width: 75%;">
		<div class="collapsible-content is-active">
			<h3>Title 1 Content</h3>
			<p>
              Lorem Ipsum is simply dummy text.
            </p>
		</div>
		<div class="collapsible-content">
			<h3>Title 2 Content</h3>
			<p>
              Lorem Ipsum has been the industry's standard dummy text.
            </p>
		</div>
	</div>
</div>

Now when I click on "Title 2" on first div, I want to remove all "is-active" class, and put "is-active" class in "Title 2" form first div and div of "Title 2 content" in second div.

(function ($) {
  $(".collapsible-title").on("click", function () {
    $(this).addClass("is-active").siblings(".collapsible-title").removeClass("is-active");
    $(".collapsible-content").addClass("is-active").siblings(".collapsible-content").removeClass("is-active");
  });
});

If the order of the elements are the same then you can add .eq($(this).index()) to your code.

$(".collapsible-title").on("click", function() {
  $(this).addClass("is-active").siblings(".collapsible-title").removeClass("is-active");
  $(".collapsible-content").eq($(this).index()).addClass("is-active").siblings(".collapsible-content").removeClass("is-active");
});

This will add the class to the corresponding div to the clicked element.

<!-- begin snippet: js hide: true console: true babel: false -->

<!-- language: lang-js -->

$(".collapsible-title").on("click", function() {
  $(this).addClass("is-active").siblings(".collapsible-title").removeClass("is-active");
  $(".collapsible-content").eq($(this).index()).addClass("is-active").siblings(".collapsible-content").removeClass("is-active");
});

<!-- language: lang-css -->

.collapsible-content {
  display: none;
}

.collapsible-content.is-active {
  display: block;
}

<!-- language: lang-html -->

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="container" style="display: flex;">
  <div style="width: 25%;">
    <div class="collapsible-title is-active">Title 1
      <i class="fas fa-solid fa-chevron-right"></i>
    </div>
    <div class="collapsible-title">Title 2
      <i class="fas fa-solid fa-chevron-right"></i>
    </div>
  </div>
  <div style="width: 75%;">
    <div class="collapsible-content is-active">
      <h3>Title 1 Content</h3>
      <p>
        Lorem Ipsum is simply dummy text.
      </p>
    </div>
    <div class="collapsible-content">
      <h3>Title 2 Content</h3>
      <p>
        Lorem Ipsum has been the industry's standard dummy text.
      </p>
    </div>
  </div>
</div>

<!-- end snippet -->

Whichever div is clicked, its content is displayed. Are you looking for something like this?

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-js -->

var title1Tab=document.getElementById('title1-tab');
var title2Tab=document.getElementById('title2-tab');
var title1Content=document.getElementById('title1-content');
var title2Content=document.getElementById('title2-content');

title1Tab.addEventListener('click',()=>{
  title1Content.classList.remove('non-active');
  title1Content.classList.add('is-active');
  title2Content.classList.remove('is-active');
  title2Content.classList.add('non-active');
})
title2Tab.addEventListener('click',()=>{
  title2Content.classList.remove('non-active');
  title2Content.classList.add('is-active');
  title1Content.classList.remove('is-active');
  title1Content.classList.add('non-active');
})

<!-- language: lang-css -->

.is-active{
  display:block;
}
.non-active{
  display:none;
}

<!-- language: lang-html -->

<div class="container" style="display: flex;">
    <div style="width: 25%;">
        <div class="collapsible-title is-active" id="title1-tab">Title 1
            <i class="fas fa-solid fa-chevron-right"></i>
        </div>
        <div class="collapsible-title" id="title2-tab">Title 2
            <i class="fas fa-solid fa-chevron-right"></i>
        </div>
    </div>
    <div style="width: 75%;">
        <div class="collapsible-content is-active" id="title1-content">
            <h3>Title 1 Content</h3>
            <p>
              Lorem Ipsum is simply dummy text.
            </p>
        </div>
        <div class="collapsible-content non-active" id="title2-content">
            <h3>Title 2 Content</h3>
            <p>
              Lorem Ipsum has been the industry's standard dummy text.
            </p>
        </div>
    </div>
</div>

<!-- end snippet -->