An async function awaits another async function. How does it interleave with a then chain?

async function outer() {
  console.log("outer start");
  await inner();
  console.log("outer end");
}
 
async function inner() {
  console.log("inner start");
  await null;
  console.log("inner end");
}
 
outer();
Promise.resolve()
  .then(() => console.log("then 1"))
  .then(() => console.log("then 2"))
  .then(() => console.log("then 3"));
console.log("sync");