align factoring problems on the equal sign

static/factoring.html

@@ -93,21 +93,22 @@
   }
 
   .problem {
-    display: flex;
+    display: grid;
+    grid-template-columns: 26px 1fr auto auto;
     align-items: baseline;
-    gap: 6px;
+    column-gap: 6px;
     font-size: 1.2rem;
     font-weight: 700;
     padding: 7px 4px;
     border-bottom: 1px solid #e0e0e0;
   }
   .prob-num {
-    min-width: 26px;
     font-size: 0.78rem;
     font-weight: 800;
     color: #999;
-    flex-shrink: 0;
   }
+  .lhs { text-align: right; }
+  .rhs { text-align: left; }
   .answer-line {
     border-bottom: 2px solid #111;
     min-width: 34px;
@@ -222,23 +223,24 @@ function renderProblems() {
   // Part I - Factor: given a + b, write the factored form
   const partA = genUnique(PER_PART).map((t, i) =>
     `<div class="problem"><span class="prob-num">${i+1}.</span>` +
-    `<span>${t.a} + ${t.b} = ` +
-    `<span class="answer-line"></span>(<span class="answer-line"></span> + <span class="answer-line"></span>)` +
-    `</span></div>`
+    `<span class="lhs">${t.a} + ${t.b}</span><span>=</span>` +
+    `<span class="rhs"><span class="answer-line"></span>(<span class="answer-line"></span> + <span class="answer-line"></span>)</span>` +
+    `</div>`
   ).join('');
 
   // Part II - Expand: given x(y + z), write the sum
   const partB = genUnique(PER_PART).map((t, i) =>
     `<div class="problem"><span class="prob-num">${i+1}.</span>` +
-    `<span>${t.x}(${t.y} + ${t.z}) = ` +
-    `<span class="answer-line"></span> + <span class="answer-line"></span>` +
-    `</span></div>`
+    `<span class="lhs">${t.x}(${t.y} + ${t.z})</span><span>=</span>` +
+    `<span class="rhs"><span class="answer-line"></span> + <span class="answer-line"></span></span>` +
+    `</div>`
   ).join('');
 
   // Part III - Find the common factor: fill the box
   const partC = genUnique(PER_PART).map((t, i) =>
     `<div class="problem"><span class="prob-num">${i+1}.</span>` +
-    `<span>${t.a} + ${t.b} = <span class="box-blank"></span>(${t.y} + ${t.z})</span></div>`
+    `<span class="lhs">${t.a} + ${t.b}</span><span>=</span>` +
+    `<span class="rhs"><span class="box-blank"></span>(${t.y} + ${t.z})</span></div>`
   ).join('');
 
   return `