<div class="card">
    <div class="imageSide">
        <img src="https://picsum.photos/100" />
    </div>
    <div class="informationSide">
        <div class="information">
            <strong>120.235</strong>
            <span>TAKİPÇİLER</span>
        </div>
        <div class="information">
            <strong>120.235</strong>
            <span>TAKİP EDİLEN</span>
        </div>
    </div>
</div>

.card, .card * {
    display:flex;
    margin:0;
    padding:0;
    flex-direction:column;
  }
.card { 
  width:350px; 
  border:1px solid gray; 
  border-radius:10px; 
  background:#09c; 
  flex-direction:row; 
  align-items:center; 
  justify-content:space-between;
}
.card > .imageSide {
  
}
.card > .imageSide > img {
  border-radius:50%;
  width:100px;
  margin:15px;
}
.card > .informationSide {
  flex-direction:row;
  flex-wrap: wrap;
  align-items:center;
  justify-content:flex-end;
  margin-left:auto;
}
.card > .informationSide > .information {
  width:100px;
  text-align:center;
  padding:5px 15px;
}
.card > .informationSide > .information > strong {
  font-size:22px;
}
.card > .informationSide > .information > span {
  font-size:12px;
}

.card elementinin width değerini artırdığınızda, takip elementlerinin yan yana geldiğini görebilirsiniz.
Bunu sağlayan flex tasarımda kullanılan flex-wrap özelliğidir.

Merhaba @262efe.
Input'tan aldığın değerler varsayılan olarak string türündedir. Input'tan gelen değerin sayı olup olmadığını isNaN() fonksiyonuyla test edebilirsin. Sonra da Number() fonksiyonuyla bu değeri sayıya çevirmelisin. Daha sonra işleme sokabilirsin. Eğer bölme işlemi yapacaksan bölen sayının sıfır olmadığına emin olmalısın çünkü sıfıra bölümler de NaN döner.
Input'tan aldığın verinin bir sayıyla çarpımıyla ilgili örnek:

<input id=userNumber type=number placeholder="Bir sayı girin" />
<button id=calculationButton>Hesapla</button>
<div id=resultArea></div>

// Butonu id attribute'si ile seçiyorum ve $calculationButton adlı değişkene atıyorum.
// Zorunlu değil ama bir elementi değişkene atıyorsak değişken adını $ işaretiyle başlatırız.
const $calculationButton = document.getElementById("calculationButton");

// input elementini de bir değişkene alıyorum.
const $userNumber = document.getElementById("userNumber");

// Sonucu yazacağımız div elementini de bir değişkene alıyorum.
const $resultArea = document.getElementById("resultArea");

// input'a girilen sayıyı hangi sayıyla çarpacağımızı da belirleyelim.
const constantNumber = 2;

// Butonun click olayını dinliyorum.
$calculationButton.addEventListener("click", function() {

    // input'taki değeri bir değişkene alıyorum.
    // Bu değişkenin değerini daha sonra değiştireceğim için const yerine let kullanarak oluşturuyorum.
    let inputValue = $userNumber.value;
    
    // Aldığım değerin sayı olup olmadığını kontrol ediyorum.
    // Eğer sayı değilse bir uyarı verip işlem yapılmasını engelliyorum.
    if(isNaN(inputValue)) {
        $resultArea.innerHTML = "Bir sayı değeri girmelisiniz!"; // div'e uyarı mesajını yazdım.
        $userNumber.value = ""; // Input'a yazılan değeri sildim.
        return; // Bu fonksiyonun bu adımdan sonra çalışmamasını sağladım.
    }
    
    // Input sayısal değer içeren bir string'tir.
    // Örneğin "12" bir string'tir ama tamamen sayılardan oluştuğu için
    // isNaN() fonksiyonu bunun bir sayı olduğunu söyler. Biz bunu "12" değil 12 yapacağız:
    inputValue = Number(inputValue);
    
    // Artık güvenle çarpma işlemimizi yapabiliriz.
    // Bölme işlemi yapmayacağımız için sayının 0 olup olmaması önemli değil.
    // Sabit sayımız olan constantNumber ile input'un değeri olan inputValue'yi çarpabiliriz.
    const result = constantNumber * inputValue;
    
    // Bulduğum değeri resultArea id'li div elementine yazıyorum:
    $resultArea.innerHTML = constantNumber + " x " + inputValue + " = " + result;
    
});

B sitesinin veritabanına bağlanma işini doğrudan B sitesinden erişerek yapabilirsiniz.
1. B sitesinde web servis gibi çalışacak bir sayfa oluşturun. Bu sayfa kendisine POST yöntemiyle gelen verileri alsın, kendi veritabanına yazsın.
2. A sitesinden bu B sitesindeki sayfaya POST isteği gönderin.

B sitesinde integration.php sayfası

$productId = $_POST["product_id"];
$newPrice = $_POST["price"];

updateDatabase("UPDATE products SET price='$newPrice' WHERE id=$productId");

echo json_encode(["status"=>true, "message"=>"Price updated successfully"]);
exit();

A sitesinde bir ürünün fiyatını kendi veritabanına kaydederken, B sitesine de durumu bildiren sayfa

// ... A sitesi kendi veritabanında güncelleme işini yaptıktan sonra B sitesine de verileri gönderiyor...

$fields = ['product_id' => '1234', 'price' => '19.90'];

$postvars = http_build_query($fields);

$ch = curl_init();
curl_setopt($ch, CURLOPT_URL, "https://b.site/integration.php");
curl_setopt($ch, CURLOPT_POST, count($fields));
curl_setopt($ch, CURLOPT_POSTFIELDS, $postvars);
$result = curl_exec($ch);
curl_close($ch);

// Burada da dönen $result değerine göre işlemin başarılı/başarısız oluşuna göre aksiyon alınabilir...

Dikkat: Bu örneklerde hiçbir güvenlik önlemi alınmadığı için saldırıya çok açık.
B sitesinde hangi siteden istek atıldığının tespiti, SQL injection önlemleri, A sitesinin B sitesine istek göndermeden önce B sitesinde oturum açması veya bir token alması...
Ama temel olarak sunucular arası veritabanı bağlantısı kuramıyorsanız siz de böyle bir yola başvurabilirsiniz.

<div id="infinite-scroll">
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
</div>

#infinite-scroll { width: 400px; height:400px; padding:5px; overflow-y: scroll;}
.item { margin:5px; height:150px; background-color: #ccc; }

const $scrollView = document.getElementById("infinite-scroll");
$scrollView.addEventListener("scroll", function (e) {
    const scrollTop = e.target.scrollTop;
    const contentHeight = e.target.scrollHeight - e.target.offsetHeight;
    if (contentHeight <= scrollTop) {
        alert("son!")
    }
}) 

web.dev sitesinden bulduğum aşağıdaki başlıklara göz atabilirsiniz.

Bazı Animasyonlar Neden Yavaş Çalışır?

Modern tarayıcılar iki CSS özelliğini ucuza canlandırabilir: transform ve opacity.
Başka bir animasyon yaparsanız, saniyede 60 kare (FPS) ipeksi pürüzsüzlükte bir hız elde edemezsiniz. Bu yazı, bunun neden böyle olduğunu açıklıyor.

Animasyon Performansı ve Kare Hızı

Web'de herhangi bir animasyon kullanılırken hedefin 60 FPS'lik bir kare hızı olduğu yaygın olarak kabul edilmektedir. Bu kare hızı, animasyonlarınızın düzgün görünmesini sağlayacaktır. Web'de bir frame, ekranı güncellemek ve yeniden render etmek için gereken tüm işleri yapmak için gereken süredir. Her frame 16.7ms (1000ms / 60 ≈ 16.7) içinde tamamlanmazsa, kullanıcılar gecikmeyi algılayacaktır.

Render İşlem Sırası

Bir web sayfasında bir şey görüntülemek için tarayıcının aşağıdaki sıralı adımlardan geçmesi gerekir:

• Style: Elemente uygulanan stiller hesaplanır.
• Layout: Her elemanın geometrik şekli ve konumu bulunur.
• Paint: Her elementin pikselleri katmanlara doldurulur.
• Composite: Katmanlar ekrana çizilir.

Bu 4 atım tarayıcıların rendering pipeline'ı olarak bilinir.
Zaten yüklenmiş bir sayfada bir şeyi anime ettiğinizde, bu adımların tekrar ele alınması gerekir. Bu süreç, animasyonun gerçekleşmesi için değiştirilmesi gereken adımdan başlar.
Daha önce yazdığım gibi, bu adımlar sıralıdır. Örneğin, layout'u değiştiren bir animasyon uygularsanız, paint ve birleştirme adımlarının da yeniden çalışması gerekir. Bu nedenle, düzeni değiştiren bir şeyi canlandırmak, yalnızca kompozisyonu değiştiren bir şeyi canlandırmaktan daha pahalıdır.Daha önce yazdığım gibi, bu adımlar sıralıdır. Örneğin, layout'u değiştiren bir animasyon uygularsanız, paint ve composite adımlarının da yeniden çalışması gerekir. Bu nedenle, layout'u değiştiren bir animasyon, yalnızca composite adımını değiştiren bir animasyondan daha maliyetlidir.

Layout Animasyon Özellikleri

Layout değişiklikleri, değişiklikten etkilenen tüm öğelerin geometrisinin (konum ve boyut) hesaplanmasını içerir. Bir elementi değiştirirseniz, diğer elemanların geometrisinin de yeniden hesaplanması gerekebilir. Örneğin, <html> öğesinin genişliğini değiştirirseniz, alt öğelerinden herhangi biri etkilenebilir. Öğelerin taşma ve birbirini etkileme şekli nedeniyle, ağacın daha aşağısındaki değişiklikler bazen en üste kadar yerleşim hesaplamalarına neden olabilir.
Görünür öğelerin ağacı ne kadar büyükse, layout hesaplamalarının yapılması o kadar uzun sürer.

Paint Animasyon Özellikleri

Paint, elementlerin ekranda hangi sırayla boyanacağını belirleme işlemidir. Genellikle pipeline'daki tüm görevlerin en uzun sürenidir.
Uygulamanızdaki öğelerin katmanlar halinde nasıl gruplandığına bağlı olarak, değişenlerin yanı sıra diğer öğelerin de boyanması gerekebilir.

Composite Animasyon Özellikleri

Composite (birleştirme), sayfayı katmanlara ayırma, sayfanın nasıl görünmesi gerektiğiyle ilgili bilgileri piksellere dönüştürme ve sayfayı oluşturmak için katmanları bir araya getirme (birleştirme) işlemidir.
opacity animasyonunun maliyeti düşükler listesine dahil edilmesinin nedeni budur. Bu özellik kendi katmanında olduğu sürece, bu özellikteki değişiklikler composite (birleştirme) adımı sırasında GPU tarafından işlenebilir. Chromium tabanlı tarayıcılar ve WebKit, opacity ve transform animasyonu olan herhangi bir öğe için yeni bir katman oluşturur.

Katman nedir?

Tarayıcının, canlandırılacak veya geçişi yapılacak şeyleri yeni bir katmana yerleştirerek, diğer her şeyi değil, yalnızca bu öğeleri yeniden boyaması gerekir. Photoshop'un, birlikte hareket ettirilebilen bir grup öğe içeren katman kavramına aşina olabilirsiniz. Tarayıcı oluşturma katmanları bu fikre benzer.
Tarayıcı, yeni bir katmanda hangi öğelerin olması gerektiğine karar vermekte iyiyse de, birini kaçırırsa, katman oluşturmaya zorlamanın yolları vardır. Bunu, yüksek performanslı animasyonlar nasıl oluşturulur bölümünde bulabilirsiniz.
Ancak, her katman RAM'de (geçici bellekte) yer tutacağından, yeni katman oluştururken iyi düşünmek gerekir.
Sınırlı belleğe sahip cihazlarda yeni katmanlar oluşturmak, çözmeye çalıştığınızdan daha fazla performans sorununa neden olabilir. Ek olarak, her katmanın dokularının GPU'ya yüklenmesi gerekir. Bu nedenle, CPU ve GPU arasındaki bant genişliğininin de kısıtlamasına takılarak performans kaybı yaşayabilirsiniz.

Yüksek Performanslı CSS Animasyonları Nasıl Yapılır?

Bu kılavuz size yüksek performanslı CSS animasyonlarının nasıl oluşturulacağınızı anlatır.
Bu kılavuzun önerdiği tüm CSS özellikleri çok iyi tarayıcı uyumluluğuna sahiptir:

• transform
• opacity
• will-change

... Bu sayfanın içeriği çok uzun olduğu için şu an çevirecek zamanım yok ama basit bir dil kullanıldığı için kolayca anlayabilirsiniz.