If you're looking to revamp your HTML structure, consider the following adjustments I suggest making. First, I've assigned a class to your parent element, "row", and then transferred the "col-md-12" class to the main element.
<div class="row experiences">
@forelse (auth()->user()->experiences->sortByDesc('subject') as $experience)
<main class="experience col-md-12">
<span class="button is-danger is-small text-right is-rounded" data-toggle="modal" data-target="#ExperienceDeleteModal{{ $experience->id }}"><i class="far fa-trash-alt"></i></span>
<span class="button is-link is-small text-right is-rounded" data-toggle="modal" data-target="#ExperienceEditModal{{ $experience->id }}"><i class="fas fa-pen"></i></span>
<h1>{{$experience->subject}}</h1>
<p class="subtitle is-6">{{$experience->experience_desc}}</p>
<hr>
</main>
@include('frontend.profile.experience.edit')
@include('frontend.profile.experience.delete')
@empty
<p class="pl-3">There are currently no experiences</p>
@endforelse
</div>
The resulting HTML will somewhat resemble the code below. The CSS utilizes the main element to target the last main within "experiences", locates the hr, and hides it.
.experiences main:last-of-type hr { display: none; }
<div class="row experiences">
<main class="experience col-md-12">
<span class="button is-danger is-small text-right is-rounded" data-toggle="modal" data-target="#ExperienceDeleteModal{{ $experience->id }}"><i class="far fa-trash-alt"></i></span>
<span class="button is-link is-small text-right is-rounded" data-toggle="modal" data-target="#ExperienceEditModal{{ $experience->id }}"><i class="fas fa-pen"></i></span>
<h1>{{$experience->subject}}</h1>
<p class="subtitle is-6">{{$experience->experience_desc}}</p>
<hr>
</main>
<main class="experience col-md-12">
<span class="button is-danger is-small text-right is-rounded" data-toggle="modal" data-target="#ExperienceDeleteModal{{ $experience->id }}"><i class="far fa-trash-alt"></i></span>
<span class="button is-link is-small text-right is-rounded" data-toggle="modal" data-target="#ExperienceEditModal{{ $experience->id }}"><i class="fas fa-pen"></i></span>
<h1>{{$experience->subject}}</h1>
<p class="subtitle is-6">{{$experience->experience_desc}}</p>
<hr>
</main>
<main class="experience col-md-12">
<span class="button is-danger is-small text-right is-rounded" data-toggle="modal" data-target="#ExperienceDeleteModal{{ $experience->id }}"><i class="far fa-trash-alt"></i></span>
<span class="button is-link is-small text-right is-rounded" data-toggle="modal" data-target="#ExperienceEditModal{{ $experience->id }}"><i class="fas fa-pen"></i></span>
<h1>{{$experience->subject}}</h1>
<p class="subtitle is-6">{{$experience->experience_desc}}</p>
<hr>
</main>
</div>
If your
@include('frontend.profile.experience.edit')
or
@include('frontend.profile.experience.delete')
insert a
main element, this solution may need further tweaking...