Combining two hit box (colliders) to become one

Once the two collide, you can use Physics.IgnoreCollision(object1.Collider, object2.Collider), which will prevent them from colliding. Once the area in either is greater than ~70%, you could destroy one of them, then lerp the size of the new one to be as big as both combined.

If your objects both have rigidbodies, then I guess you'd need to remove one of them upon collision. Next you should parent the object which rigidbody was removed to the one with the rigidbody still on. Note that the resulting combined collider will remain the same shape of the two separate ones, it won't build a "big collider" as in your drawing with your circles.

Some naive code would look like this but this won't work since you'd get the same callback on both objects. You need to take into consideration the rules for which of the rigid bodies that should be the parent. It only serves as a guide how you could go on with the actual parenting:

// Warning, this code won't work without extra checks!
void OnCollisionEnter(Collision collision)
{
    Destroy(collision.rigidbody);
    collision.transform.parent = transform;
}

Another way to get one new object could be something like this:

Create a new empty GameObject in the center of the hit boxes.
Attach a Rigidbody and Collider to the new object.
Use Collider.bounds to calculate the size for the new Collider.
Use Rigidbody.mass to calculate the mass for the new Rigidbody.
Remove the Rigidbodies and Colliders to the old objects.

(You could also compare the masses of the old objects to adjust Rigidbody.centerOfMass for the new Rigidbody.)